Merge pull request #15553 from ethereum/homepage-ssr

refactor: homepage to SSR

Author: corwintines

app/[locale]/10years/_components/CountDown.tsx

@@ -2,16 +2,21 @@
 
 import { useEffect, useState } from "react"
 
-import { cn } from "@/lib/utils/cn"
+import type { TimeLeftLabels } from "@/lib/types"
 
-import { useTranslation } from "@/hooks/useTranslation"
+import { cn } from "@/lib/utils/cn"
 
 interface CountDownProps {
   className?: string
+  timeLeftLabels: TimeLeftLabels
+  expiredLabel: string
 }
 
-const CountDown = ({ className }: CountDownProps) => {
-  const { t } = useTranslation("page-10-year-anniversary")
+const CountDown = ({
+  className,
+  timeLeftLabels,
+  expiredLabel,
+}: CountDownProps) => {
   const [timeLeft, setTimeLeft] = useState({
     days: 0,
     hours: 0,
@@ -49,11 +54,7 @@ const CountDown = ({ className }: CountDownProps) => {
   }, [])
 
   if (isExpired) {
-    return (
-      <div className="text-center text-2xl font-bold">
-        {t("page-10-year-countdown-expired")}
-      </div>
-    )
+    return <div className="text-center text-2xl font-bold">{expiredLabel}</div>
   }
 
   return (
@@ -68,7 +69,9 @@ const CountDown = ({ className }: CountDownProps) => {
           {timeLeft.days}
         </div>
         <div className="font-mono text-xs text-accent-a">
-          {t("page-10-year-countdown-days")}
+          {timeLeft.days === 1
+            ? timeLeftLabels.days.singular
+            : timeLeftLabels.days.plural}
         </div>
       </div>
       <div
@@ -81,7 +84,9 @@ const CountDown = ({ className }: CountDownProps) => {
           {timeLeft.hours}
         </div>
         <div className="font-mono text-xs text-accent-a">
-          {t("page-10-year-countdown-hours")}
+          {timeLeft.hours === 1
+            ? timeLeftLabels.hours.singular
+            : timeLeftLabels.hours.plural}
         </div>
       </div>
       <div
@@ -94,7 +99,9 @@ const CountDown = ({ className }: CountDownProps) => {
           {timeLeft.minutes}
         </div>
         <div className="font-mono text-xs text-accent-a">
-          {t("page-10-year-countdown-minutes")}
+          {timeLeft.minutes === 1
+            ? timeLeftLabels.minutes.singular
+            : timeLeftLabels.minutes.plural}
         </div>
       </div>
       <div
@@ -107,7 +114,9 @@ const CountDown = ({ className }: CountDownProps) => {
           {timeLeft.seconds}
         </div>
         <div className="font-mono text-xs text-accent-a">
-          {t("page-10-year-countdown-seconds")}
+          {timeLeft.seconds === 1
+            ? timeLeftLabels.seconds.singular
+            : timeLeftLabels.seconds.plural}
         </div>
       </div>
     </div>

app/[locale]/10years/_components/TenYearHomeBanner.tsx

@@ -1,17 +1,22 @@
-"use client"
+import { getTranslations } from "next-intl/server"
 
 import ParallaxImage from "@/components/Image/ParallaxImage"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 
 import Countdown from "./CountDown"
+import { getTimeUnitTranslations } from "./utils"
 
-import { useTranslation } from "@/hooks/useTranslation"
 import TenYearGraphicImage from "@/public/images/10-year-anniversary/10-year-logo.png"
 import TenYearDesktopText from "@/public/images/10-year-anniversary/10yeartext.svg"
 import TenYearMobileText from "@/public/images/10-year-anniversary/10yeartext-mobile.svg"
 
-const TenYearHomeBanner = () => {
-  const { t } = useTranslation("page-10-year-anniversary")
+const TenYearHomeBanner = async ({ locale }: { locale: string }) => {
+  const t = await getTranslations({
+    locale,
+    namespace: "page-10-year-anniversary",
+  })
+
+  const timeLeftLabels = await getTimeUnitTranslations(locale)
 
   return (
     <div className="relative rounded-2xl bg-[url('/images/10-year-anniversary/10-year-background.png')] bg-cover bg-center text-center">
@@ -23,6 +28,7 @@ const TenYearHomeBanner = () => {
           className="mx-auto -mb-2 -mt-16 max-w-[min(100%,500px)] object-contain sm:-mt-24 md:-mt-32"
         />
         <div className="mt-4 flex justify-center">
+          <h2 className="sr-only">{t("page-10-year-banner-header")}</h2>
           <TenYearDesktopText className="mb-4 hidden object-contain text-body md:block" />
           <TenYearMobileText className="mb-4 block object-contain text-5xl text-body md:hidden" />
         </div>
@@ -32,7 +38,12 @@ const TenYearHomeBanner = () => {
           </p>
           <p>{t("page-10-year-banner-tagline")}</p>
         </div>
-        <Countdown className="mb-8 mt-4 bg-background" />
+        <Countdown
+          className="mb-8 mt-4 bg-background"
+          timeLeftLabels={timeLeftLabels}
+          expiredLabel={t("page-10-year-countdown-expired")}
+        />
+
         <ButtonLink href="/10years/">{t("page-10-year-banner-cta")}</ButtonLink>
       </div>
     </div>

app/[locale]/10years/_components/utils.ts

@@ -1,3 +1,7 @@
+import { getTranslations } from "next-intl/server"
+
+import { TimeLeftLabels } from "@/lib/types"
+
 import { formatDate, isValidDate } from "@/lib/utils/date"
 
 import { DEFAULT_LOCALE } from "@/lib/constants"
@@ -29,3 +33,29 @@ export const parseStoryDates = (
     ...story,
     date: parseDate(date, locale),
   }))
+
+export const getTimeUnitTranslations = async (locale: string) => {
+  const t = await getTranslations({
+    locale,
+    namespace: "page-10-year-anniversary",
+  })
+  const timeLeftLabels: TimeLeftLabels = {
+    days: {
+      singular: t("page-10-year-countdown-day"),
+      plural: t("page-10-year-countdown-days"),
+    },
+    hours: {
+      singular: t("page-10-year-countdown-hour"),
+      plural: t("page-10-year-countdown-hours"),
+    },
+    minutes: {
+      singular: t("page-10-year-countdown-minute"),
+      plural: t("page-10-year-countdown-minutes"),
+    },
+    seconds: {
+      singular: t("page-10-year-countdown-second"),
+      plural: t("page-10-year-countdown-seconds"),
+    },
+  }
+  return timeLeftLabels
+}

app/[locale]/10years/page.tsx

@@ -32,7 +32,7 @@ import { adoptionCards, adoptionStyles } from "./_components/data"
 import InnovationSwiper from "./_components/InnovationSwiper"
 import Stories from "./_components/Stories"
 import TenYearHero from "./_components/TenYearHero"
-import { parseStoryDates } from "./_components/utils"
+import { getTimeUnitTranslations, parseStoryDates } from "./_components/utils"
 
 import { fetch10YearEvents } from "@/lib/api/fetch10YearEvents"
 import { fetch10YearStories } from "@/lib/api/fetch10YearStories"
@@ -74,6 +74,8 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
     namespace: "page-10-year-anniversary",
   })
 
+  const timeLeftLabels = await getTimeUnitTranslations(locale)
+
   return (
     <I18nProvider locale={locale} messages={messages}>
       <MainArticle className="mx-auto flex w-full flex-col items-center">
@@ -92,7 +94,10 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
             </div>
           </div>
           <div className="flex flex-1 flex-row items-center justify-center">
-            <CountDown />
+            <CountDown
+              timeLeftLabels={timeLeftLabels}
+              expiredLabel={t("page-10-year-countdown-expired")}
+            />
           </div>
         </div>