feat: Add events page

lighthouserc.cjs

@@ -1,4 +1,4 @@
-const PAGES_EXCLUDED = ['news', 'storage'];
+const PAGES_EXCLUDED = ['news', 'events', 'storage'];
 
 // Do not convert into an ES6 export.
 // lighthouse-ci (as of 0.14.0) uses require() to import, and this is not supported with ES6 modules.
@@ -9,6 +9,7 @@ const config = {
         'http://localhost:3000/en/', // Trailing slash required, else the regex for default lighthouse rules won't catch this one
         'http://localhost:3000/en/about',
         'http://localhost:3000/en/events',
+        'http://localhost:3000/en/events/1',
         'http://localhost:3000/en/news',
         'http://localhost:3000/en/news/1',
         'http://localhost:3000/en/storage',
@@ -68,6 +69,19 @@ const config = {
             'image-aspect-ratio': 'off', // Should be removed when we obtain images from backend
           },
         },
+        {
+          matchingUrlPattern: 'http://.*/en/events.*',
+          preset: 'lighthouse:recommended',
+          assertions: {
+            'bf-cache': 'off',
+            'color-contrast': 'off',
+            'heading-order': 'off',
+            'largest-contentful-paint': 'off',
+            'render-blocking-resources': 'off',
+            'uses-responsive-images': 'off',
+            'label-content-name-mismatch': 'off',
+          },
+        },
       ],
     },
   },

messages/en.json

@@ -21,7 +21,8 @@
     "selectMonth": "Select month",
     "selectYear": "Select year",
     "pickDate": "Pick a date",
-    "dateFormat": "dd/MM/yyyy"
+    "dateFormat": "dd/MM/yyyy",
+    "internal": "Internal"
   },
   "error": {
     "notFound": "404 - Page not found",
@@ -156,5 +157,17 @@
         }
       }
     }
+  },
+  "events": {
+    "title": "Events",
+    "activeEvents": "Active events",
+    "upcomingEvents": "Upcoming events",
+    "pastEvents": "Past events",
+    "detailsAboutEvent": "Read more about {eventName}",
+    "startsAt": "Starts at",
+    "startedAt": "Started at",
+    "endsAt": "Ends at",
+    "endedAt": "Ended at",
+    "backToEvents": "Back to Events"
   }
 }

messages/no.json

@@ -21,7 +21,8 @@
     "selectMonth": "Velg måned",
     "selectYear": "Velg år",
     "pickDate": "Velg en dato",
-    "dateFormat": "dd.MM.yyyy"
+    "dateFormat": "dd.MM.yyyy",
+    "internal": "Intern"
   },
   "error": {
     "notFound": "404 - Siden ble ikke funnet",
@@ -156,5 +157,17 @@
         }
       }
     }
+  },
+  "events": {
+    "title": "Arrangementer",
+    "activeEvents": "Pågående arrangementer",
+    "upcomingEvents": "Kommende arrangementer",
+    "pastEvents": "Tidligere arrangementer",
+    "detailsAboutEvent": "Les mer om {eventName}",
+    "startsAt": "Starter kl.",
+    "startedAt": "Startet kl.",
+    "endsAt": "Slutter kl.",
+    "endedAt": "Sluttet kl.",
+    "backToEvents": "Tilbake til arrangementer"
   }
 }

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

@@ -0,0 +1,21 @@
+import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
+import { ArrowLeftIcon } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
+
+export default async function EventDetailsLayout({
+  children,
+}: { children: React.ReactNode }) {
+  const t = await getTranslations('events');
+  return (
+    <>
+      <Button variant='secondary' aria-label='Back to Events' asChild>
+        <Link href='/events' className='flex gap-2'>
+          <ArrowLeftIcon aria-hidden='true' />
+          {t('backToEvents')}
+        </Link>
+      </Button>
+      {children}
+    </>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { Separator } from '@/components/ui/Separator';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { CalendarIcon, MapPinIcon } from 'lucide-react';
+
+export default function EventDetailsLoading() {
+  return (
+    <>
+      <Skeleton className='my-4 h-12 w-3/4 rounded-lg' />
+      <Skeleton className='h-8 w-1/2 rounded-lg' />
+      <div className='mt-4 space-y-4'>
+        <div className='flex items-center gap-2'>
+          <CalendarIcon className='h-8 w-8' />
+          <Skeleton className='h-6 w-64 rounded-lg' />
+        </div>
+        <div className='flex items-center gap-2'>
+          <MapPinIcon className='h-8 w-8' />
+          <Skeleton className='h-6 w-32 rounded-lg' />
+        </div>
+        <Separator />
+        <div className='flex justify-between'>
+          <Skeleton className='h-36 w-3/5 rounded-lg' />
+          <Skeleton className='h-48 w-48 rounded-full' />
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { CalendarIcon, MapPinIcon } from 'lucide-react';
+import { notFound } from 'next/navigation';
+import { format, isSameDay } from 'date-fns';
+
+import { Avatar, AvatarImage } from '@/components/ui/Avatar';
+import { Badge } from '@/components/ui/Badge';
+import { Separator } from '@/components/ui/Separator';
+// TODO: Must be replaced with actual events
+import { events } from '@/mock-data/events';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+}) {
+  const { id } = await params;
+  const event = events.find((event) => event.id.toString() === id);
+
+  return {
+    title: `${event?.title}`,
+  };
+}
+
+export default async function EventDetailsPage({
+  params,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+}) {
+  const { locale, id } = await params;
+  setRequestLocale(locale);
+
+  const t = await getTranslations('ui');
+  const event = events.find((event) => event.id.toString() === id);
+
+  if (!event) return notFound();
+
+  const startDate = new Date(event.startTime);
+  const endDate = new Date(event.endTime);
+
+  const formattedRange = isSameDay(startDate, endDate)
+    ? `${format(startDate, 'HH:mm')} - ${format(endDate, 'HH:mm, dd.MM.yyyy')}`
+    : `${format(startDate, 'HH:mm, dd/MM/yyyy')} - ${format(endDate, 'HH:mm, dd.MM.yyyy')}`;
+
+  return (
+    <>
+      <h1 className='my-4'>{event.title}</h1>
+      <h2 className='border-b-0 text-2xl'>{event.subheader}</h2>
+      <div className='mt-4 space-y-4'>
+        {event.internal && (
+          <Badge className='rounded-full'>{t('internal')}</Badge>
+        )}
+        <div className='flex items-center gap-2'>
+          <CalendarIcon className='h-8 w-8' />
+          {formattedRange}
+        </div>
+        <div className='flex items-center gap-2'>
+          <MapPinIcon className='h-8 w-8' />
+          {event.location}
+        </div>
+        <Separator />
+        <div className='flex justify-between'>
+          <div className='max-w-prose'>
+            <p>{event.description}</p>
+          </div>
+          <Avatar className='h-48 w-48'>
+            <AvatarImage src='/event.webp' alt='' className='object-cover' />
+          </Avatar>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { EventCardSkeleton } from '@/components/events/EventCardSkeleton';
+import { getTranslations } from 'next-intl/server';
+
+export default async function EventsSkeleton() {
+  const t = await getTranslations('events');
+  return (
+    <>
+      <h1 className='my-4'>{t('title')}</h1>
+      <h2 className='my-2'>{t('activeEvents')}</h2>
+      <EventCardSkeleton />
+      <h2 className='my-4'>{t('upcomingEvents')}</h2>
+      <div className='grid grid-cols-1 gap-2 lg:grid-cols-2'>
+        <EventCardSkeleton />
+        <EventCardSkeleton />
+        <EventCardSkeleton />
+        <EventCardSkeleton />
+      </div>
+      <h2 className='my-4'>{t('pastEvents')}</h2>
+      <div className='grid grid-cols-1 gap-2 lg:grid-cols-2'>
+        <EventCardSkeleton />
+        <EventCardSkeleton />
+        <EventCardSkeleton />
+        <EventCardSkeleton />
+      </div>
+    </>
+  );
+}

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

@@ -1,5 +1,9 @@
+import { EventCard } from '@/components/events/EventCard';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 
+// TODO: Must be replaced with actual events
+import { events } from '@/mock-data/events';
+
 export async function generateMetadata({
   params,
 }: {
@@ -21,5 +25,37 @@ export default async function EventsPage({
 }) {
   const { locale } = await params;
   setRequestLocale(locale);
-  return <div>This should be events page</div>;
+  const t = await getTranslations('events');
+
+  return (
+    <>
+      <h1 className='my-4'>{t('title')}</h1>
+      <h2 className='my-2'>{t('activeEvents')}</h2>
+      {events.slice(0, 1).map((event) => (
+        <EventCard key={event.id} event={event} _active />
+      ))}
+      <h2 className='my-4'>{t('upcomingEvents')}</h2>
+      <div className='grid grid-cols-1 gap-2 lg:grid-cols-2'>
+        {events.slice(1, 5).map((event) => (
+          <EventCard
+            key={event.id}
+            event={event}
+            wrapperClassName='lg:last:odd:col-span-2'
+            cardClassName='h-full'
+          />
+        ))}
+      </div>
+      <h2 className='my-4'>{t('pastEvents')}</h2>
+      <div className='grid grid-cols-1 gap-2 lg:grid-cols-2'>
+        {events.slice(5).map((event) => (
+          <EventCard
+            key={event.id}
+            event={event}
+            wrapperClassName='lg:last:odd:col-span-2'
+            cardClassName='h-full'
+          />
+        ))}
+      </div>
+    </>
+  );
 }

src/components/composites/CategorySelector.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { Combobox } from '@/components/ui/Combobox';
 import { useQueryState } from 'nuqs';
 import { parseAsString } from 'nuqs/server';
-import { Combobox } from '../ui/Combobox';
 
 type CategorySelectorProps = {
   categories: {

src/components/events/EventCard.tsx

@@ -0,0 +1,89 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/Card';
+
+import { Avatar, AvatarImage } from '@/components/ui/Avatar';
+import { Badge } from '@/components/ui/Badge';
+import { Link } from '@/lib/locale/navigation';
+import { cx } from '@/lib/utils';
+import type { events } from '@/mock-data/events';
+import { format } from 'date-fns';
+import { getTranslations } from 'next-intl/server';
+
+type EventCardProps = {
+  event: (typeof events)[number];
+  wrapperClassName?: string;
+  cardClassName?: string;
+  _active?: boolean;
+};
+
+/**
+ * A card for an event.
+ * Only set the _active prop to true if you're testing active events.
+ */
+async function EventCard({
+  event,
+  wrapperClassName,
+  cardClassName,
+  _active,
+}: EventCardProps) {
+  const t = await getTranslations('events');
+  const tUi = await getTranslations('ui');
+
+  const formattedStartDate = format(event.startTime, 'HH:mm, dd.MM.yyyy');
+  const formattedEndDate = format(event.endTime, 'HH:mm, dd.MM.yyyy');
+
+  const started = event.startTime < new Date() || _active;
+  const ended = event.endTime < new Date();
+
+  return (
+    <Link
+      href={{ pathname: '/events/[id]', params: { id: event.id } }}
+      aria-label={t('detailsAboutEvent', { eventName: event.title })}
+      className={wrapperClassName}
+    >
+      <Card
+        className={cx('flex flex-col text-center', cardClassName, {
+          'bg-secondary': started && !ended,
+        })}
+      >
+        <CardHeader>
+          <CardTitle>{event.title}</CardTitle>
+          <CardDescription>{event.subheader}</CardDescription>
+          {event.internal && (
+            <Badge className='mx-auto w-fit rounded-full'>
+              {tUi('internal')}
+            </Badge>
+          )}
+        </CardHeader>
+        <CardContent className='flex flex-col-reverse items-center gap-2 md:flex-row md:justify-between'>
+          <p>{event.description}</p>
+          <Avatar className='h-48 w-48'>
+            <AvatarImage
+              src='/event.webp'
+              alt={tUi('photoOf', { name: event.title })}
+              className='object-cover'
+            />
+          </Avatar>
+        </CardContent>
+        <CardFooter className='mt-auto flex-col gap-2'>
+          <span>
+            {started ? <>{t('startedAt')}</> : <>{t('startsAt')}</>}{' '}
+            {formattedStartDate}
+          </span>
+          <span>
+            {ended ? <>{t('endedAt')}</> : <>{t('endsAt')}</>}{' '}
+            {formattedEndDate}
+          </span>
+        </CardFooter>
+      </Card>
+    </Link>
+  );
+}
+
+export { EventCard };