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 flex-col-reverse items-center gap-6 md:flex-row md:justify-between'>
+          <Skeleton className='h-36 w-full max-w-prose rounded-lg md:flex-1' />
+          <Skeleton className='h-48 w-48 rounded-full' />
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { format, isSameDay } from 'date-fns';
+import { CalendarIcon, MapPinIcon } from 'lucide-react';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+
+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 flex-col-reverse items-center gap-6 md:flex-row md: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,4 +1,9 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server';
+import Link from 'next/link'; // using this instead of next-intl's link because we're staying on the same page
+
+import { EventCard } from '@/components/events/EventCard';
+// TODO: Must be replaced with actual events
+import { events } from '@/mock-data/events';
 
 export async function generateMetadata({
   params,
@@ -21,5 +26,84 @@ export default async function EventsPage({
 }) {
   const { locale } = await params;
   setRequestLocale(locale);
-  return <div>This should be events page</div>;
+  const t = await getTranslations('events');
+  const tUi = await getTranslations('ui');
+
+  const translations = {
+    internal: tUi('internal'),
+    startsAt: t('startsAt'),
+    startedAt: t('startedAt'),
+    endsAt: t('endsAt'),
+    endedAt: t('endedAt'),
+  };
+
+  return (
+    <>
+      <h1 className='my-4'>{t('title')}</h1>
+      <Link href='#active'>
+        <h2 className='my-2' id='active'>
+          {t('activeEvents')}
+        </h2>
+      </Link>
+      {events.slice(0, 1).map((event) => (
+        <EventCard
+          key={event.id}
+          wrapperClassName='block'
+          event={event}
+          t={{
+            detailsAboutEvent: t('detailsAboutEvent', {
+              eventName: event.title,
+            }),
+            photoOf: tUi('photoOf', { name: event.title }),
+            ...translations,
+          }}
+          _active
+        />
+      ))}
+      <Link href='#upcoming'>
+        <h2 className='my-4' id='upcoming'>
+          {t('upcomingEvents')}
+        </h2>
+      </Link>
+      <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'
+            t={{
+              detailsAboutEvent: t('detailsAboutEvent', {
+                eventName: event.title,
+              }),
+              photoOf: tUi('photoOf', { name: event.title }),
+              ...translations,
+            }}
+          />
+        ))}
+      </div>
+      <Link href='#past'>
+        <h2 className='my-4' id='past'>
+          {t('pastEvents')}
+        </h2>
+      </Link>
+      <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'
+            t={{
+              detailsAboutEvent: t('detailsAboutEvent', {
+                eventName: event.title,
+              }),
+              photoOf: tUi('photoOf', { name: event.title }),
+              ...translations,
+            }}
+          />
+        ))}
+      </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: {