feat: Translate event pages

Author: ZeroWave022

messages/en.json

@@ -132,5 +132,17 @@
       "returnByDescription": "Select how long you would like to borrow the item for.",
       "submit": "Submit"
     }
+  },
+  "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

@@ -132,5 +132,17 @@
       "returnByDescription": "Velg hvor lenge du ønsker å låne gjenstanden(e)",
       "submit": "Send"
     }
+  },
+  "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

@@ -1,10 +1,12 @@
 import { Button } from '@/components/ui/Button';
 import { ArrowLeftIcon } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
 import Link from 'next/link';
 
-export default function EventDetailsLayout({
+export default async function EventDetailsLayout({
   children,
 }: { children: React.ReactNode }) {
+  const t = await getTranslations('events');
   return (
     <>
       <Link href='/events'>
@@ -14,7 +16,7 @@ export default function EventDetailsLayout({
           aria-label='Back to Events'
         >
           <ArrowLeftIcon aria-hidden='true' />
-          <span>Back to Events</span>
+          <span>{t('backToEvents')}</span>
         </Button>
       </Link>
       {children}

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

@@ -1,7 +1,7 @@
 import { Avatar, AvatarImage } from '@/components/ui/Avatar';
 import { Separator } from '@/components/ui/Separator';
-import { ArrowLeftIcon, CalendarIcon, MapPinIcon } from 'lucide-react';
 import { Skeleton } from '@/components/ui/Skeleton';
+import { ArrowLeftIcon, CalendarIcon, MapPinIcon } from 'lucide-react';
 
 export default function EventDetailsLoading() {
   return (

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

@@ -44,12 +44,13 @@ export default async function EventDetailsPage({
   const timeOptions = {
     hour: '2-digit',
     minute: '2-digit',
+    hour12: false,
   } as const;
 
-  const formattedStartTime = startDate.toLocaleTimeString('en-GB', timeOptions);
-  const formattedEndTime = endDate.toLocaleTimeString('en-GB', timeOptions);
-  const formattedStartDay = startDate.toLocaleDateString('en-GB');
-  const formattedEndDay = endDate.toLocaleDateString('en-GB');
+  const formattedStartTime = startDate.toLocaleTimeString(locale, timeOptions);
+  const formattedEndTime = endDate.toLocaleTimeString(locale, timeOptions);
+  const formattedStartDay = startDate.toLocaleDateString(locale);
+  const formattedEndDay = endDate.toLocaleDateString(locale);
 
   return (
     <>

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

@@ -25,10 +25,12 @@ export default async function EventsPage({
 }) {
   const { locale } = await params;
   setRequestLocale(locale);
+  const t = await getTranslations('events');
+
   return (
     <>
-      <h1 className='my-4'>Events</h1>
-      <h2 className='my-2'>Active events</h2>
+      <h1 className='my-4'>{t('title')}</h1>
+      <h2 className='my-2'>{t('activeEvents')}</h2>
       {events.slice(0, 1).map((event) => (
         <EventCard
           key={event.id}
@@ -39,10 +41,11 @@ export default async function EventsPage({
           imagePath={event.imagePath}
           startTime={new Date(event.startTime)}
           endTime={new Date(event.endTime)}
+          locale={locale}
           _active
         />
       ))}
-      <h2 className='my-4'>Upcoming events</h2>
+      <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
@@ -54,12 +57,13 @@ export default async function EventsPage({
             imagePath={event.imagePath}
             startTime={new Date(event.startTime)}
             endTime={new Date(event.endTime)}
+            locale={locale}
             wrapperClassName='lg:last:odd:col-span-2'
             cardClassName='h-full'
           />
         ))}
       </div>
-      <h2 className='my-4'>Past events</h2>
+      <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
@@ -71,6 +75,7 @@ export default async function EventsPage({
             imagePath={event.imagePath}
             startTime={new Date(event.startTime)}
             endTime={new Date(event.endTime)}
+            locale={locale}
             wrapperClassName='lg:last:odd:col-span-2'
             cardClassName='h-full'
           />

src/components/events/EventCard.tsx

@@ -9,6 +9,7 @@ import {
 
 import { Avatar, AvatarImage } from '@/components/ui/Avatar';
 import { cx } from '@/lib/utils';
+import { getTranslations } from 'next-intl/server';
 import Link from 'next/link';
 
 type EventCardProps = {
@@ -19,6 +20,7 @@ type EventCardProps = {
   imagePath?: string;
   startTime: Date;
   endTime: Date;
+  locale: string;
   wrapperClassName?: string;
   cardClassName?: string;
   _active?: boolean;
@@ -28,26 +30,28 @@ type EventCardProps = {
  * A card for an event.
  * Only set the _active prop to true if you're testing active events.
  */
-function EventCard(props: EventCardProps) {
+async function EventCard(props: EventCardProps) {
+  const t = await getTranslations('events');
+
   const dateOptions = { hour: '2-digit', minute: '2-digit' } as const;
   const formattedStartTime = props.startTime.toLocaleTimeString(
-    'en-GB',
+    props.locale,
     dateOptions,
   );
-  const formattedStartDate = props.startTime.toLocaleDateString('en-GB');
+  const formattedStartDate = props.startTime.toLocaleDateString(props.locale);
   const formattedEndTime = props.endTime.toLocaleTimeString(
-    'en-GB',
+    props.locale,
     dateOptions,
   );
-  const formattedEndDate = props.endTime.toLocaleDateString('en-GB');
+  const formattedEndDate = props.endTime.toLocaleDateString(props.locale);
 
   const started = props.startTime < new Date() || props._active;
   const ended = props.endTime < new Date();
 
   return (
     <Link
       href={`/events/${props.id}`}
-      aria-label={`Read more about ${props.title}`}
+      aria-label={t('detailsAboutEvent', { eventName: props.title })}
       className={props.wrapperClassName}
     >
       <Card
@@ -67,12 +71,12 @@ function EventCard(props: EventCardProps) {
         </CardContent>
         <CardFooter className='mt-auto flex-col gap-2'>
           <span>
-            {started ? <>Started at</> : <>Starts at</>} {formattedStartTime},{' '}
-            {formattedStartDate}
+            {started ? <>{t('startedAt')}</> : <>{t('startsAt')}</>}{' '}
+            {formattedStartTime}, {formattedStartDate}
           </span>
           <span>
-            {ended ? <>Ended at</> : <>Ends at</>} {formattedEndTime},{' '}
-            {formattedEndDate}
+            {ended ? <>{t('endedAt')}</> : <>{t('endsAt')}</>}{' '}
+            {formattedEndTime}, {formattedEndDate}
           </span>
         </CardFooter>
       </Card>