refactor: TenYearHero to server component

Author: wackerow

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

@@ -1,15 +1,17 @@
-"use client"
+import { getTranslations } from "next-intl/server"
 
 import { Image } from "@/components/Image"
 import ParallaxImage from "@/components/Image/ParallaxImage"
 import Morpher from "@/components/Morpher"
 
-import { useTranslation } from "@/hooks/useTranslation"
 import TenYearBackgroundImage from "@/public/images/10-year-anniversary/10-year-background.png"
 import TenYearGraphicImage from "@/public/images/10-year-anniversary/10-year-graphic.png"
 
-const TenYearHero = () => {
-  const { t } = useTranslation("page-10-year-anniversary")
+const TenYearHero = async ({ locale }: { locale: string }) => {
+  const t = await getTranslations({
+    locale,
+    namespace: "page-10-year-anniversary",
+  })
 
   const WORDS = [
     t("page-10-year-censorship-resistance"),

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

@@ -77,7 +77,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   return (
     <I18nProvider locale={locale} messages={messages}>
       <MainArticle className="mx-auto flex w-full flex-col items-center">
-        <TenYearHero />
+        <TenYearHero locale={locale} />
 
         <div className="mt-16 flex w-full flex-col gap-16 px-8 py-4 md:flex-row md:py-8">
           <div className="flex flex-1 flex-col gap-5">