feat: Show past events

src/app/events/Events.tsx

@@ -1,23 +1,32 @@
 import FancyRectangle from '@/components/FancyRectangle';
 import { EVENTS, type Event } from '@/data/events';
+import { getUpcomingEvents, getPastEvents } from '@/utils/get-events-date';
 import Image from 'next/image';
 import { FiClock, FiMapPin } from 'react-icons/fi';
 
-function Title() {
+function Title({ children }: { children: string }) {
     return (
         <div className="flex justify-center">
             <FancyRectangle colour="yellow" offset="8">
                 <div className="w-fit bg-yellow p-2">
                     <h2 className="text-center text-4xl font-bold text-grey md:text-6xl">
-                        Upcoming Events
+                        {children}
                     </h2>
                 </div>
             </FancyRectangle>
         </div>
     );
 }
 
-function EventCard({ event, index }: { event: Event; index: number }) {
+function EventCard({
+    event,
+    index,
+    isPastEvent,
+}: {
+    event: Event;
+    index: number;
+    isPastEvent?: boolean;
+}) {
     return (
         <FancyRectangle colour="white" offset="8" rounded fullWidth>
             <div className="flex w-full flex-col gap-6 rounded-xl bg-white p-4 text-black md:flex-row">
@@ -26,7 +35,7 @@ function EventCard({ event, index }: { event: Event; index: number }) {
                     alt={`${event.title}`}
                     width={450}
                     height={450}
-                    className="w-full shrink-0 rounded-lg border-[3px] border-black bg-white object-contain md:w-[450px]"
+                    className={`w-full shrink-0 rounded-lg border-[3px] border-black bg-white object-contain md:w-[450px] ${isPastEvent ? 'grayscale' : ''}`}
                 />
                 <div className="grow space-y-2 md:space-y-4">
                     <div className="flex gap-6 font-bold">
@@ -44,7 +53,7 @@ function EventCard({ event, index }: { event: Event; index: number }) {
                             </div>
                         </div>
                         <div
-                            className={`h-fit rounded-md border-[3px] border-black px-4 py-2 ${['bg-orange', 'bg-yellow', 'bg-purple'][index % 3]}`}
+                            className={`h-fit rounded-md border-[3px] border-black px-4 py-2 ${['bg-orange', 'bg-yellow', 'bg-purple'][index % 3]} ${isPastEvent ? 'grayscale' : ''}`}
                         >
                             <div>{event.date.month}</div>
                             <div>{event.date.day}</div>
@@ -68,12 +77,28 @@ function EventCard({ event, index }: { event: Event; index: number }) {
 }
 
 export default function Events({ className }: { className?: string }) {
+    const upcomingEvents = getUpcomingEvents(EVENTS);
+    const pastEvents = getPastEvents(EVENTS);
+
     return (
         <section className={`${className} space-y-8`}>
-            <Title />
-            {EVENTS.map((event, i) => (
-                <EventCard key={i} index={i} event={event} />
-            ))}
+            {upcomingEvents.length > 0 && (
+                <>
+                    <Title>{'Upcoming Events'}</Title>
+                    {upcomingEvents.map((event, i) => (
+                        <EventCard key={i} index={i} event={event} />
+                    ))}
+                </>
+            )}
+
+            {pastEvents.length > 0 && (
+                <>
+                    <Title>{'Past Events'}</Title>
+                    {pastEvents.map((event, i) => (
+                        <EventCard key={i} index={i} event={event} isPastEvent={true} />
+                    ))}
+                </>
+            )}
         </section>
     );
 }

src/data/events.ts

@@ -15,7 +15,7 @@ type Month =
     | 'DEC';
 export type Event = {
     title: string;
-    date: { month: Month; day: number };
+    date: { year: number; month: Month; day: number; endTime: string };
     time: string;
     location: string;
     details: string;
@@ -24,35 +24,35 @@ export type Event = {
 };
 
 export const EVENTS: Event[] = [
-    // {
-    //     title: 'Meet and Greet',
-    //     date: { month: 'MAR', day: 1 },
-    //     time: '5:00pm - 9:00pm',
-    //     location: 'Engineering and Maths EM105',
-    //     details:
-    //         "Come hang out and meet the Computer Science Club's committee and members in your first week of the new academic year!\nWe have board games in collaboration with the GAMES Club and our club owned Nintendo Switch.\nFood and drinks will also be provided.",
-    //     image: 'meet-and-greet.jpg',
-    // },
-    // {
-    //     title: 'Insight Into Industry',
-    //     date: { month: 'MAR', day: 6 },
-    //     time: '6:00pm - 9:00pm',
-    //     location: 'Ingkarni Wardli 715',
-    //     details:
-    //         'Unsure of what jobs are available in the tech industry? Or looking to find out more about where your expertise could take you? If so, come along and gain insights into what a career in the industry might look like.',
-    //     image: 'insight-into-industry.jpg',
-    // },
-    // {
-    //     title: 'Quiz Night',
-    //     date: { month: 'MAR', day: 8 },
-    //     time: '6:00pm - 9:00pm',
-    //     location: 'Ingkarni Wardli 218',
-    //     details: 'Join us for a night of quizzical encounters! Free food and prizes to come!',
-    //     image: 'quiz-night.jpg',
-    // },
+    {
+        title: 'Meet and Greet',
+        date: { year: 2024, month: 'MAR', day: 1, endTime: '21:00' },
+        time: '5:00pm - 9:00pm',
+        location: 'Engineering and Maths EM105',
+        details:
+            "Come hang out and meet the Computer Science Club's committee and members in your first week of the new academic year!\nWe have board games in collaboration with the GAMES Club and our club owned Nintendo Switch.\nFood and drinks will also be provided.",
+        image: 'meet-and-greet.jpg',
+    },
+    {
+        title: 'Insight Into Industry',
+        date: { year: 2024, month: 'MAR', day: 6, endTime: '21:00' },
+        time: '6:00pm - 9:00pm',
+        location: 'Ingkarni Wardli 715',
+        details:
+            'Unsure of what jobs are available in the tech industry? Or looking to find out more about where your expertise could take you? If so, come along and gain insights into what a career in the industry might look like.',
+        image: 'insight-into-industry.jpg',
+    },
+    {
+        title: 'Quiz Night',
+        date: { year: 2024, month: 'MAR', day: 8, endTime: '21:00' },
+        time: '6:00pm - 9:00pm',
+        location: 'Ingkarni Wardli 218',
+        details: 'Join us for a night of quizzical encounters! Free food and prizes to come!',
+        image: 'quiz-night.jpg',
+    },
     {
         title: 'Industry Night',
-        date: { month: 'APR', day: 2 },
+        date: { year: 2024, month: 'APR', day: 2, endTime: '21:00' },
         time: '6:00pm - 9:00pm',
         location: 'The National Wine Centre, Hickinbotham Hall',
         details: 'Connect with top companies and explore job opportunities in the tech industry!',

src/utils/get-events-date.ts

@@ -0,0 +1,23 @@
+import { Event } from '@/data/events';
+
+// Convert event date and return upcoming events
+export function getUpcomingEvents(EVENTS: Event[]): Event[] {
+    const currentDate = new Date();
+    return EVENTS.filter((event) => {
+        const eventDate = new Date(
+            `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}`
+        );
+        return eventDate >= currentDate;
+    });
+}
+
+// Convert event date and return past events in reversed order
+export function getPastEvents(EVENTS: Event[]): Event[] {
+    const currentDate = new Date();
+    return EVENTS.filter((event) => {
+        const eventDate = new Date(
+            `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}`
+        );
+        return eventDate < currentDate;
+    }).reverse();
+}