Skip to content

Commit

Permalink
feat: add past events section
Browse files Browse the repository at this point in the history
  • Loading branch information
@phoenixpereira
phoenixpereira committed Mar 18, 2024
1 parent 59df121 commit af774d1
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 29 deletions.
50 changes: 43 additions & 7 deletions src/app/events/Events.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,29 @@ import { EVENTS, type Event } from '@/data/events';
import Image from 'next/image';
import { FiClock, FiMapPin } from 'react-icons/fi';

function Title() {
function Title({ title }: { title: 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
{title}
</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">
Expand All @@ -26,7 +34,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 filter' : ''}`}
/>
<div className="grow space-y-2 md:space-y-4">
<div className="flex gap-6 font-bold">
Expand All @@ -44,7 +52,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 filter' : ''}`}
>
<div>{event.date.month}</div>
<div>{event.date.day}</div>
Expand All @@ -58,12 +66,40 @@ function EventCard({ event, index }: { event: Event; index: number }) {
}

export default function Events({ className }: { className?: string }) {
const currentDate = new Date(); // Current timestamp

// Convert event date and check if upcoming event
const upcomingEvents = EVENTS.filter((event) => {
const eventDate = new Date(
`${event.date.year} ${event.date.month} ${event.date.day} ${event.endTime}`
);
console.log('event: ' + eventDate);
return eventDate >= currentDate;
});

// Convert event date, check if past event and reverse events
const pastEvents = EVENTS.filter((event) => {
const eventDate = new Date(
`${event.date.year} ${event.date.month} ${event.date.day} ${event.endTime}`
);
return eventDate < currentDate;
}).reverse();

return (
<section className={`${className} space-y-8`}>
<Title />
{EVENTS.map((event, i) => (
<Title title="Upcoming Events" />
{upcomingEvents.map((event, i) => (
<EventCard key={i} index={i} event={event} />
))}

{pastEvents.length > 0 && (
<>
<Title title="Past Events" />
{pastEvents.map((event, i) => (
<EventCard key={i} index={i} event={event} isPastEvent={true} />
))}
</>
)}
</section>
);
}
50 changes: 28 additions & 22 deletions src/data/events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,51 +15,57 @@ 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;
image: string;
};

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: '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: { month: 'MAR', day: 8 },
date: { year: 2024, month: 'MAR', day: 18 },
endTime: '12: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!',
image: 'industry-night.jpg',
},
{
title: 'LaTeX Workshop',
date: { month: 'APR', day: 4 },
date: { year: 2024, month: 'APR', day: 4 },
endTime: '19:00',
time: '5:00pm - 7:00pm',
location: 'Ingkarni Wardli 218',
details:
Expand Down

0 comments on commit af774d1

Please sign in to comment.