Skip to content

Commit 02acb4d

Browse files
bryanbabbryanbab
committed
Added 30 minute skills page
1 parent a4b3d41 commit 02acb4d

File tree

14 files changed

+446
-126
lines changed

14 files changed

+446
-126
lines changed

‎nefac-website/package-lock.json‎

Lines changed: 123 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nefac-website/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
"@fortawesome/free-brands-svg-icons": "^5.15.4",
2222
"@fortawesome/free-solid-svg-icons": "^5.15.4",
2323
"@fortawesome/react-fontawesome": "^0.1.19",
24-
"@radix-ui/react-label": "^2.1.7",
2524
"@radix-ui/react-accordion": "^1.2.11",
25+
"@radix-ui/react-label": "^2.1.7",
2626
"@radix-ui/react-slot": "^1.2.3",
2727
"@types/wordpress__block-editor": "^11.5.16",
2828
"@types/wordpress__blocks": "^12.5.17",
@@ -34,12 +34,12 @@
3434
"clsx": "^2.1.1",
3535
"embla-carousel-react": "^8.6.0",
3636
"graphql": "^16.11.0",
37+
"lodash": "^4.17.21",
3738
"lucide": "^0.522.0",
39+
"lucide-react": "^0.475.0",
3840
"next": "^15.3.3",
3941
"react": "^19.1.0",
4042
"react-dom": "^19.1.0",
41-
"lodash": "^4.17.21",
42-
"lucide-react": "^0.475.0",
4343
"react-icons": "^5.5.0",
4444
"react-player": "^2.16.0",
4545
"react-router-dom": "^7.2.0",

‎nefac-website/public/images/nefac-stopwatch.png‎

118 KB
Loading

‎nefac-website/public/images/upcoming-class.png‎

303 KB
Loading

‎nefac-website/src/components/education/EducationInitiativeWrapper.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export default function EducationInitiativeWrapper({ children }: EducationInitia
99
<SidebarWrapper
1010
title="Education Initiatives"
1111
items={[
12-
{ title: "30 Minute Skills", link: "/education-initiative" },
13-
{ title: "First Amendment and the Free Press", link: "/education-initiative-abc" },
12+
{ title: "30 Minute Skills", link: "/education/thirty-minute-skills" },
13+
{ title: "First Amendment & Free Press", link: "/education-initiative-abc" },
1414
{ title: "FOI Guide", link: "/education/foi-guide" },
1515
{ title: "NEFAC Mentors", link: "/education/nefac-mentors" },
1616
{ title: "Negri Institute", link: "/education-initiative-jkl" },

‎nefac-website/src/components/education/past-recordings/PastRecordingCard.tsx‎

Lines changed: 46 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { faYoutube } from "@fortawesome/free-brands-svg-icons";
44

55
interface PastRecordingCardProps {
66
recording: PastRecording;
7-
variant?: "vertical" | "grid";
7+
variant?: "vertical" | "grid";
88
}
99

1010
const PastRecordingCard: React.FC<PastRecordingCardProps> = ({
@@ -14,83 +14,58 @@ const PastRecordingCard: React.FC<PastRecordingCardProps> = ({
1414
const isGrid = variant === "grid";
1515

1616
return (
17-
<<<<<<< HEAD:nefac-website/src/components/education-page/past-recordings/PastRecordingCard.tsx
18-
<div className="flex flex-col md:flex-row
19-
items-start md:items-center
20-
bg-[#2F5C9F] text-white
21-
rounded-xl max-w-4xl shadow-xl p-4">
22-
<div className="relative w-full sm:w-1/3 mb-4 sm:mb-0">
17+
<div
18+
className={
19+
isGrid
20+
? "rounded-xl overflow-hidden shadow-md bg-white flex flex-col max-w-[350px]"
21+
: "flex flex-col md:flex-row items-start md:items-center bg-[#2F5C9F] text-white rounded-xl max-w-4xl shadow-xl p-4"
22+
}
23+
>
24+
<div className={`relative ${isGrid ? "" : "w-full sm:w-1/3 mb-4 sm:mb-0"}`}>
2325
<a href={recording.recordingUrl} target="_blank" rel="noopener noreferrer">
24-
<img
25-
src={recording.thumbnailUrl}
26-
alt={recording.title}
27-
className="rounded-lg w-full aspect-video object-cover border-[3px] border-[#D8DADD]"
26+
<img
27+
src={recording.thumbnailUrl}
28+
alt={recording.title}
29+
className={`rounded-lg w-full aspect-video object-cover ${isGrid ? "" : "border-[3px] border-[#D8DADD]"
30+
}`}
31+
/>
32+
<div className="absolute inset-0 flex items-center justify-center">
33+
<FontAwesomeIcon
34+
icon={faYoutube}
35+
className="text-[50px]"
36+
style={{ color: "red" }}
2837
/>
29-
<div className="absolute inset-0 flex items-center justify-center">
30-
<div className="bg-white opacity-80 rounded-md w-[50px] h-[20px] flex items-center justify-center">
31-
<FontAwesomeIcon
32-
icon={faYoutube}
33-
className="text-[50px]"
34-
style={{ color: "red" }}
35-
/>
36-
</div>
37-
</div>
38+
</div>
3839
</a>
39-
=======
40-
<div
41-
className={
42-
isGrid
43-
? "rounded-xl overflow-hidden shadow-md bg-white flex flex-col"
44-
: "flex flex-col md:flex-row items-start md:items-center bg-[#2F5C9F] text-white rounded-xl max-w-4xl shadow-xl p-4"
45-
}
46-
>
47-
<div className={`relative ${isGrid ? "" : "w-full sm:w-1/3 mb-4 sm:mb-0"}`}>
48-
<a href={recording.recordingUrl} target="_blank" rel="noopener noreferrer">
49-
<img
50-
src={recording.thumbnailUrl}
51-
alt={recording.title}
52-
className={`rounded-lg w-full aspect-video object-cover ${
53-
isGrid ? "" : "border-[3px] border-[#D8DADD]"
54-
}`}
55-
/>
56-
<div className="absolute inset-0 flex items-center justify-center">
57-
<img
58-
src="/icons/youtube.png"
59-
alt="YouTube Logo"
60-
className="w-10 h-auto opacity-75"
61-
/>
6240
</div>
63-
</a>
64-
</div>
6541

66-
{isGrid ? (
67-
<div className="bg-[#2F5C9F] text-white p-3 rounded-b-xl -mt-6 relative z-10 flex-1">
68-
<h3 className="font-bold text-md">{recording.title}</h3>
69-
{recording.author && (
70-
<p className="text-sm italic mt-1">{recording.author}</p>
71-
)}
72-
>>>>>>> main:nefac-website/src/components/education/past-recordings/PastRecordingCard.tsx
73-
</div>
74-
) : (
75-
<div className="sm:ml-6 flex-1">
76-
<h3 className="text-lg font-semibold mb-2">{recording.title}</h3>
77-
{recording.description && (
78-
<p className="text-sm mb-2">{recording.description}</p>
79-
)}
80-
{recording.notesUrl && (
81-
<a
82-
href={recording.notesUrl}
83-
target="_blank"
84-
rel="noopener noreferrer"
85-
className="underline text-sm mt-2 inline-block hover:underline"
86-
>
87-
Discussion notes and links.
88-
</a>
42+
{isGrid ? (
43+
<div className="bg-[#2F5C9F] text-white p-3 rounded-b-xl -mt-6 relative z-10 flex-1">
44+
<h3 className="font-bold text-sm">{recording.title}</h3>
45+
{recording.author && (
46+
<p className="text-sm italic mt-1">{recording.author}</p>
47+
)}
48+
</div>
49+
) : (
50+
<div className="sm:ml-6 flex-1">
51+
<h3 className="text-lg font-semibold mb-2">{recording.title}</h3>
52+
{recording.description && (
53+
<p className="text-sm mb-2">{recording.description}</p>
54+
)}
55+
{recording.notesUrl && (
56+
<a
57+
href={recording.notesUrl}
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
className="underline text-sm mt-2 inline-block hover:underline"
61+
>
62+
Discussion notes and links.
63+
</a>
64+
)}
65+
</div>
8966
)}
9067
</div>
91-
)}
92-
</div>
93-
);
68+
);
9469
};
9570

9671
export default PastRecordingCard;

‎nefac-website/src/components/education/past-recordings/PastRecordingDisplay.tsx‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { PastRecording } from "./PastRecordingInterface";
22
import PastRecordingCard from "./PastRecordingCard";
33
import { usePaginatedRecordings } from "@/lib/usePaginatedRecordings";
4+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
5+
import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
46

57
interface PastRecordingsDisplayProps {
68
recordings: PastRecording[];
@@ -11,7 +13,7 @@ const PastRecordingsDisplay: React.FC<PastRecordingsDisplayProps> = ({
1113
recordings,
1214
variant = "vertical",
1315
}) => {
14-
16+
1517
const defaultInitialCount = variant === "grid" ? 4 : 5;
1618
const defaultIncrementCount = variant === "grid" ? 4 : 5;
1719

@@ -31,63 +33,52 @@ const PastRecordingsDisplay: React.FC<PastRecordingsDisplayProps> = ({
3133
const isGrid = variant === "grid";
3234

3335
return (
34-
<div className="flex flex-col items-center mt-16 mb-24 mx-4">
36+
<div className="flex flex-col mt-16 mb-24 w-full items-center">
3537
{visible.length === 0 ? (
3638
<p>There are no past recordings for this program right now.</p>
3739
) : (
3840
<div
3941
className={
4042
isGrid
41-
? "grid gap-6 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 w-full max-w-xl"
43+
? "grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-5 max-w-[900px] w-full"
4244
: "grid grid-cols-1 items-center space-y-6"
4345
}
4446
>
4547
{visible.map((recording, index) => (
46-
<PastRecordingCard
47-
key={index}
48-
recording={recording}
49-
variant={variant}
50-
/>
48+
<PastRecordingCard
49+
recording={recording}
50+
variant={variant}
51+
/>
5152
))}
5253
</div>
5354
)}
5455

5556
{visibleCount < totalCount && (
56-
<div className={`group ${isGrid ? "mt-6" : "mb-4"}`}>
57+
<div className={`group flex justify-center ${isGrid ? "mt-6" : "mb-4"}`}>
5758
<button
5859
onClick={viewMore}
59-
className={`flex flex-row px-4 py-2 text-[#565353] gap-6 items-center ${
60-
isGrid ? "" : "mt-4"
61-
}`}
60+
className={`flex flex-row px-4 py-2 text-[#565353] gap-6 items-center ${isGrid ? "" : "mt-4"
61+
}`}
6262
>
6363
<p className="underline italic font-bold text-[#565353] text-xl group-hover:text-black">
6464
VIEW MORE
6565
</p>
66-
<img
67-
src="/icons/down.svg"
68-
alt="down arrow"
69-
className="w-6 h-6 group-hover:brightness-0"
70-
/>
66+
<FontAwesomeIcon icon={faAngleDown} className="" />
7167
</button>
7268
</div>
7369
)}
7470

7571
{isAllVisible && totalCount > defaultInitialCount && (
76-
<div className={`group ${isGrid ? "mt-4" : "mb-4"}`}>
72+
<div className={`group flex justify-center ${isGrid ? "mt-4" : "mb-4"}`}>
7773
<button
7874
onClick={viewLess}
79-
className={`flex flex-row px-4 py-2 text-[#565353] gap-6 items-center ${
80-
isGrid ? "" : "mt-4"
81-
}`}
75+
className={`flex flex-row px-4 py-2 text-[#565353] gap-6 items-center ${isGrid ? "" : "mt-4"
76+
}`}
8277
>
8378
<p className="underline italic font-bold text-[#565353] text-xl group-hover:text-black">
8479
VIEW LESS
8580
</p>
86-
<img
87-
src="/icons/up.svg"
88-
alt="up arrow"
89-
className="w-6 h-6 group-hover:brightness-0"
90-
/>
81+
<FontAwesomeIcon icon={faAngleUp} className="" />
9182
</button>
9283
</div>
9384
)}

‎nefac-website/src/components/education/upcoming-events/UpcomingEventCalendar.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,27 @@ const UpcomingEventCalendar: React.FC<UpcomingEventCalendarProps> = ({ events })
1212
.sort((a, b) => a.startDate.getTime() - b.startDate.getTime())
1313
.slice(0, 5);
1414

15-
return (
16-
<div className="flex flex-col mt-16 mb-24 items-center">
17-
<div className="bg-gray-50 rounded-xl shadow-sm px-8 py-2 w-full max-w-2xl ">
18-
{sortedEvents.length === 0 ? (
19-
<div className="text-center text-gray-500">
20-
There are no upcoming presentations at this time.
21-
</div>
22-
) : (
23-
sortedEvents.map((event, index) => (
24-
<div key={index}>
25-
<UpcomingEventCard event={event} />
26-
{index !== sortedEvents.length - 1 && (
27-
<hr className="border-gray-300" />
28-
)}
15+
return (
16+
<div className="flex flex-col mt-4 mb-24 items-start">
17+
<div className="bg-gray-50 rounded-2xl shadow-sm px-8 py-2 w-full">
18+
{sortedEvents.length === 0 ? (
19+
<div className="text-center text-gray-500">
20+
There are no upcoming presentations at this time.
2921
</div>
30-
))
31-
)}
22+
) : (
23+
sortedEvents.map((event, index) => (
24+
<div key={index}>
25+
<UpcomingEventCard event={event} />
26+
{index !== sortedEvents.length - 1 && (
27+
<hr className="border-gray-300" />
28+
)}
29+
</div>
30+
))
31+
)}
32+
</div>
3233
</div>
33-
</div>
34-
);
34+
);
35+
3536
};
3637

3738
export default UpcomingEventCalendar;

‎nefac-website/src/components/sidebar/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function Sidebar({ items }: SidebarProps) {
6060
);
6161
})}
6262
</div>
63-
<div className="w-[3px] h-[300px] bg-gray-200" />
63+
<div className="w-[5px] h-[350px] ml-2 bg-gray-200" />
6464
</div>
6565

6666
{!visible && (

‎nefac-website/src/components/sidebar/SidebarWrapper.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ export default function SidebarWrapper({
1919
}: SidebarWrapper) {
2020
return (
2121
<div className="min-h-screen">
22-
<div className="text-nefacblue text-[36px] font-bold px-8">
22+
<div className="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">
2323
{title}
2424
</div>
25-
<div className="w-full flex flex-row px-8 md:gap-9 pt-4">
25+
<div className="w-full flex flex-row px-8 md:gap-9 text-[20px]">
2626
<Sidebar items={items} />
2727
<div className="w-full flex flex-col">
2828
{children}

0 commit comments

Comments
 (0)