feat: Add events page

src/app/[locale]/(default)/events/page.tsx

@@ -1,5 +1,10 @@
+import { EventCard } from '@/components/events/EventCard';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
+// TODO: Must be replaced with actual events
+import { events } from '@/mock-data/events';
+import { useId } from 'react';
+
 export async function generateMetadata({
   params: { locale },
 }: {
@@ -18,5 +23,50 @@ export default function EventsPage({
   params: { locale: string };
 }) {
   unstable_setRequestLocale(locale);
-  return <div>This should be events page</div>;
+  return (
+    <>
+      <h1 className='my-4'>Events</h1>
+      <h2 className='my-2'>Active events</h2>
+      {events.slice(0, 1).map((event) => (
+        <EventCard
+          key={useId()}
+          title={event.title}
+          subheader={event.descriptionShort}
+          description={event.descriptionFull}
+          imagePath={event.imagePath}
+          startTime={new Date(event.startTime)}
+          endTime={new Date(event.endTime)}
+          _active
+        />
+      ))}
+      <h2 className='my-4'>Upcoming events</h2>
+      <div className='grid grid-cols-2 gap-2'>
+        {events.slice(1, 5).map((event) => (
+          <EventCard
+            key={useId()}
+            title={event.title}
+            subheader={event.descriptionShort}
+            description={event.descriptionFull}
+            imagePath={event.imagePath}
+            startTime={new Date(event.startTime)}
+            endTime={new Date(event.endTime)}
+          />
+        ))}
+      </div>
+      <h2 className='my-4'>Past events</h2>
+      <div className='grid grid-cols-2 gap-2'>
+        {events.slice(5).map((event) => (
+          <EventCard
+            key={useId()}
+            title={event.title}
+            subheader={event.descriptionShort}
+            description={event.descriptionFull}
+            imagePath={event.imagePath}
+            startTime={new Date(event.startTime)}
+            endTime={new Date(event.endTime)}
+          />
+        ))}
+      </div>
+    </>
+  );
 }

src/components/events/EventCard.tsx

@@ -0,0 +1,69 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/Card';
+
+import { Avatar, AvatarImage } from '@/components/ui/Avatar';
+import { cx } from '@/lib/utils';
+
+type EventCardProps = {
+  title: string;
+  subheader: string;
+  description: string;
+  imagePath: string;
+  startTime: Date;
+  endTime: Date;
+  _active?: boolean;
+};
+
+/**
+ * A card for an event.
+ * Only set the _active prop to true if you're testing active events.
+ */
+function EventCard(props: EventCardProps) {
+  const dateOptions = { hour: '2-digit', minute: '2-digit' } as const;
+  const formattedStartTime = props.startTime.toLocaleTimeString(
+    'en-GB',
+    dateOptions,
+  );
+  const formattedStartDate = props.startTime.toLocaleDateString('en-GB');
+  const formattedEndTime = props.endTime.toLocaleTimeString(
+    'en-GB',
+    dateOptions,
+  );
+  const formattedEndDate = props.endTime.toLocaleDateString('en-GB');
+
+  const started = props.startTime < new Date() || props._active;
+  const ended = props.endTime < new Date();
+
+  return (
+    <Card className={cx('text-center', { 'bg-secondary': started && !ended })}>
+      <CardHeader>
+        <CardTitle>{props.title}</CardTitle>
+        <CardDescription>{props.subheader}</CardDescription>
+      </CardHeader>
+      <CardContent className='flex justify-between gap-2'>
+        <p>{props.description}</p>
+        <Avatar className='h-48 w-48'>
+          <AvatarImage src='/event.jpg' className='object-cover' />
+        </Avatar>
+      </CardContent>
+      <CardFooter className='flex-col gap-2'>
+        <span>
+          {started ? <>Started at</> : <>Starts at</>} {formattedStartTime},{' '}
+          {formattedStartDate}
+        </span>
+        <span>
+          {ended ? <>Ended at</> : <>Ends at</>} {formattedEndTime},{' '}
+          {formattedEndDate}
+        </span>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export { EventCard };

src/mock-data/events.ts

@@ -0,0 +1,81 @@
+export const events = [
+  {
+    title: 'Intro to 3D Printing Workshop',
+    descriptionShort:
+      'A beginner-friendly workshop on the basics of 3D printing.',
+    descriptionFull:
+      "Join us for an introductory workshop on 3D printing! Learn about the various types of 3D printers, materials, and software needed to design and print your own projects. By the end of the session, you'll be able to print your first 3D object!",
+    startTime: '2025-01-12T17:00:00+02:00',
+    endTime: '2025-01-12T19:00:00+02:00',
+    imagePath: '/events.jpg',
+  },
+  {
+    title: 'Build Your First Circuit',
+    descriptionShort:
+      'Hands-on workshop to design and build a simple electronic circuit.',
+    descriptionFull:
+      "Ever wanted to create your own electronics? In this workshop, we'll guide you through building your first circuit! You'll learn about the basics of circuit components and practice your soldering skills to create a simple LED light setup.",
+    startTime: '2025-01-14T18:00:00+02:00',
+    endTime: '2025-01-14T20:30:00+02:00',
+    imagePath: '/events.jpg',
+  },
+  {
+    title: 'AI in Robotics: Applications and Future Trends',
+    descriptionShort: 'A talk on the role of AI in robotics and its future.',
+    descriptionFull:
+      "This session explores the impact of artificial intelligence in the field of robotics. We'll discuss recent advancements, applications in industry and academia, and potential future directions. A Q&A session will follow.",
+    startTime: '2025-01-16T16:00:00+02:00',
+    endTime: '2025-01-16T17:30:00+02:00',
+    imagePath: '/events.jpg',
+  },
+  {
+    title: 'Hackathon NTNU 2024 Kickoff',
+    descriptionShort:
+      'Kickoff meeting for Hackathon NTNU 2024 with information on teams, rules, and prizes.',
+    descriptionFull:
+      "Get ready for the biggest Hackathon of the year! Join us for the Hackathon NTNU 2024 kickoff event where you'll learn about the competition structure, form teams, and get all the essential details for the event. Don't miss out on a chance to showcase your skills and win prizes!",
+    startTime: '2025-01-20T10:00:00+02:00',
+    endTime: '2025-01-20T12:00:00+02:00',
+    imagePath: '/events.jpg',
+  },
+  {
+    title: 'Basics of Python for Data Science',
+    descriptionShort:
+      'An introductory workshop on Python programming for data science.',
+    descriptionFull:
+      "Learn Python fundamentals with a focus on data science! In this beginner-friendly session, we'll cover essential Python libraries and data manipulation techniques using pandas, NumPy, and matplotlib. Perfect for anyone interested in getting started with data analysis!",
+    startTime: '2025-01-22T17:30:00+02:00',
+    endTime: '2025-01-22T19:30:00+02:00',
+    imagePath: '/events.jpg',
+  },
+  {
+    title: 'Soldering 101: Building Your Own Sensor Kit',
+    descriptionShort:
+      'Learn the basics of soldering and create a custom sensor kit.',
+    descriptionFull:
+      "In this hands-on workshop, we'll cover the basics of soldering and guide you through creating your own temperature and humidity sensor kit. You'll walk away with valuable soldering skills and a working sensor to use in future projects!",
+    startTime: '2024-10-09T15:00:00+02:00',
+    endTime: '2024-10-09T17:30:00+02:00',
+    imagePath: '/events.jpg',
+  },
+  {
+    title: 'Advanced 3D Modeling in Fusion 360',
+    descriptionShort:
+      'A session on advanced 3D modeling techniques using Fusion 360.',
+    descriptionFull:
+      "Take your 3D modeling skills to the next level with our advanced workshop in Fusion 360! We'll cover complex shapes, custom design features, and optimization tips. Ideal for those with some prior experience in 3D modeling who want to enhance their capabilities.",
+    startTime: '2024-10-11T17:00:00+02:00',
+    endTime: '2024-10-11T19:00:00+02:00',
+    imagePath: '/events.jpg',
+  },
+  {
+    title: 'Cybersecurity Basics: Protecting Your Digital Life',
+    descriptionShort:
+      'Learn the basics of cybersecurity and best practices for online safety.',
+    descriptionFull:
+      "In this workshop, we'll go over the essential cybersecurity concepts and teach you how to protect yourself online. Topics will include password security, recognizing phishing attempts, and maintaining secure communications. A must-attend for anyone wanting to safeguard their digital presence.",
+    startTime: '2024-10-14T18:30:00+02:00',
+    endTime: '2024-10-14T20:00:00+02:00',
+    imagePath: '/events.jpg',
+  },
+];