feat: add i18n for Footer, Header and NavLinks components

waylybaye · Jan 17, 2024 · b3d7d37 · b3d7d37
1 parent d194ac2
commit b3d7d37
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 58 deletions.
diff --git a/content/i18n/en.json b/content/i18n/en.json
@@ -1,13 +1,30 @@
 {
-  "menu": {
-    "download": "Download",
-    "feature": "Features",
-    "review": "Reviews",
-    "pricing": "Pricing",
-    "faq": "FAQ",
-    "resource": "Resources",
-    "more": "More by Baye"
-  },
+  "links": [
+    {
+      "name": "Features",
+      "href": "/#Features"
+    },
+    {
+      "name": "Reviews",
+      "href": "/#Reviews"
+    },
+    {
+      "name": "Pricing",
+      "href": "/#Pricing"
+    },
+    {
+      "name": "FAQ",
+      "href": "/#FAQ"
+    },
+    {
+      "name": "Resources",
+      "href": "/#Resources"
+    },
+    {
+      "name": "More",
+      "href": "/#More"
+    }
+  ],
   "button": {
     "download": "Download OpenCat Now"
   },
@@ -345,5 +362,11 @@
         "href": "https://apps.apple.com/app/id1534690075"
       }
     ]
+  },
+  "footer": {
+    "title": "OpenCat",
+    "subtitle": "Native AI Utilities",
+    "download": "Download the app",
+    "cta": "Scan the QR code to download the app from the App Store."
   }
 }
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -22,7 +22,7 @@ export default async function Home({
 
   return (
     <>
-      <Header params={{ menu: dict.menu, button: dict.button }} />
+      <Header params={{ links: dict.links, button: dict.button }} />
       <main className="flex-auto">
         <Hero params={{
           hero: dict.hero,
@@ -55,7 +55,11 @@ export default async function Home({
         }}
         />
       </main>
-      <Footer />
+      <Footer params={{
+        footer: dict.footer,
+        links: dict.links,
+      }}
+      />
     </>
   )
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -18,7 +18,18 @@ function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
   )
 }
 
-export function Footer() {
+export function Footer({ params }: { params: {
+  footer: {
+    title: string
+    subtitle: string
+    download: string
+    cta: string
+  }
+  links: {
+    name: string
+    href: string
+  }[]
+} }) {
   return (
     <footer className="border-t border-gray-200">
       <Container>
@@ -27,12 +38,12 @@ export function Footer() {
             <div className="flex items-center text-gray-900">
               <Logomark />
               <div className="ml-4">
-                <p className="text-base font-semibold">OpenCat</p>
-                <p className="mt-1 text-sm">Native AI Utilities</p>
+                <p className="text-base font-semibold">{params.footer.title}</p>
+                <p className="mt-1 text-sm">{params.footer.subtitle}</p>
               </div>
             </div>
             <nav className="mt-11 w-11/12 grid grid-cols-3 lg:grid-cols-6 gap-8">
-              <NavLinks />
+              <NavLinks params={{ links: params.links }} />
             </nav>
           </div>
           <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-100 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
@@ -44,11 +55,11 @@ export function Footer() {
               <p className="text-base font-semibold text-gray-900">
                 <Link href="/#Download">
                   <span className="absolute inset-0 sm:rounded-2xl" />
-                  Download the app
+                  {params.footer.download}
                 </Link>
               </p>
               <p className="mt-1 text-sm text-gray-700">
-                Scan the QR code to download the app from the App Store.
+                {params.footer.cta}
               </p>
             </div>
           </div>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -51,16 +51,10 @@ function MobileNavLink(
 }
 
 export function Header({ params }: { params: {
-  menu: {
-    download: string
-    screenshot: string
-    feature: string
-    review: string
-    pricing: string
-    faq: string
-    resource: string
-    more: string
-  }
+  links: {
+    name: string
+    href: string
+  }[]
   button: {
     download: string
   }
@@ -74,7 +68,7 @@ export function Header({ params }: { params: {
               <Logo />
             </Link>
             <div className="hidden lg:flex lg:gap-10">
-              <NavLinks />
+              <NavLinks params={{ links: params.links }} />
             </div>
           </div>
           <div className="flex items-center gap-6">
@@ -118,24 +112,11 @@ export function Header({ params }: { params: {
                           className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
-                            <MobileNavLink href="/#features">
-                              {params.menu.feature}
-                            </MobileNavLink>
-                            <MobileNavLink href="/#reviews">
-                              {params.menu.review}
-                            </MobileNavLink>
-                            <MobileNavLink href="/#pricing">
-                              {params.menu.pricing}
-                            </MobileNavLink>
-                            <MobileNavLink href="/#faqs">
-                              {params.menu.faq}
-                            </MobileNavLink>
-                            <MobileNavLink href="/#resources">
-                              {params.menu.resource}
-                            </MobileNavLink>
-                            <MobileNavLink href="/#more">
-                              {params.menu.more}
-                            </MobileNavLink>
+                            { params.links.filter(({ name }) => (name !== 'Download')).map(({ name, href }) => (
+                              <MobileNavLink key={name} href={href}>
+                                {name}
+                              </MobileNavLink>
+                            )) }
                           </div>
                           <div className="mt-8 flex flex-col gap-4">
                             <Button href="#">
@@ -150,7 +131,7 @@ export function Header({ params }: { params: {
               )}
             </Popover>
             <Button href="#" className="hidden lg:block">
-              {params.menu.download}
+              {params.button.download}
             </Button>
           </div>
         </Container>

diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx
@@ -4,20 +4,18 @@ import { useRef, useState } from 'react'
 import Link from 'next/link'
 import { AnimatePresence, motion } from 'framer-motion'
 
-export function NavLinks() {
+export function NavLinks({ params }: { params: {
+  links: {
+    name: string
+    href: string
+  }[]
+} }) {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
   const timeoutRef = useRef<number | null>(null)
 
-  return [
-    ['Features', '/#features'],
-    ['Reviews', '/#reviews'],
-    ['Pricing', '/#pricing'],
-    ['FAQs', '/#faqs'],
-    ['Resources', '/#resources'],
-    ['More by Baye', '/#more'],
-  ].map(([label, href], index) => (
+  return (params.links.map(({ name, href }, index) => (
     <Link
-      key={label}
+      key={name}
       href={href}
       className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-0"
       onMouseEnter={() => {
@@ -46,7 +44,8 @@ export function NavLinks() {
           />
         )}
       </AnimatePresence>
-      <span className="relative z-10">{label}</span>
+      <span className="relative z-10">{name}</span>
     </Link>
   ))
+  )
 }