feat: footer multi lang

Fizznoc · Sep 18, 2024 · 25fda72 · 25fda72
1 parent d6f561e
commit 25fda72
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 8 deletions.
diff --git a/src/components/layout/site-footer.tsx b/src/components/layout/site-footer.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import Link from "@/components/link/link";
+import { useTranslations } from "next-intl";
 
 import { footerLinks, siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
@@ -9,13 +10,15 @@ import { NewsletterForm } from "../forms/newsletter-form";
 import { Icons } from "../shared/icons";
 
 export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
+  const t = useTranslations("Footer");
+
   return (
     <footer className={cn("border-t", className)}>
       <div className="container grid max-w-6xl grid-cols-2 gap-6 py-14 md:grid-cols-5">
         {footerLinks.map((section) => (
           <div key={section.title}>
             <span className="text-sm font-medium text-foreground">
-              {section.title}
+              {t(`sections.${section.title}.title`)}
             </span>
             <ul className="mt-4 list-inside space-y-3">
               {section.items?.map((link) => (
@@ -24,7 +27,7 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
                     href={link.href}
                     className="text-sm text-muted-foreground hover:text-primary"
                   >
-                    {link.title}
+                    {t(`sections.${section.title}.items.${link.title}`)}
                   </Link>
                 </li>
               ))}
@@ -38,11 +41,8 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
 
       <div className="border-t py-4">
         <div className="container flex max-w-6xl items-center justify-between">
-          {/* <span className="text-muted-foreground text-sm">
-            Copyright &copy; 2024. All rights reserved.
-          </span> */}
           <p className="text-left text-sm text-muted-foreground">
-            Built by{" "}
+            {t("builtBy")}{" "}
             <Link
               href={siteConfig.links.twitter}
               target="_blank"
@@ -51,7 +51,7 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
             >
               NoOne
             </Link>
-            . Hosted on{" "}
+            . {t("hostedOn")}{" "}
             <Link
               href="https://www.cloudflare.com"
               target="_blank"
@@ -60,7 +60,7 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
             >
               Cloudflare
             </Link>
-            . Illustrations by{" "}
+            . {t("illustrationsBy")}{" "}
             <Link
               href="https://popsy.co"
               target="_blank"

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -306,5 +306,39 @@
     "dashboard": "Dashboard",
     "settings": "Settings",
     "logOut": "Log out"
+  },
+  "Footer": {
+    "sections": {
+      "Company": {
+        "title": "Company",
+        "items": {
+          "About": "About",
+          "Enterprise": "Enterprise",
+          "Terms": "Terms",
+          "Privacy": "Privacy"
+        }
+      },
+      "Product": {
+        "title": "Product",
+        "items": {
+          "Security": "Security",
+          "Customization": "Customization",
+          "Customers": "Customers",
+          "Changelog": "Changelog"
+        }
+      },
+      "Docs": {
+        "title": "Docs",
+        "items": {
+          "Introduction": "Introduction",
+          "Installation": "Installation",
+          "Components": "Components",
+          "Code Blocks": "Code Blocks"
+        }
+      }
+    },
+    "builtBy": "Built by",
+    "hostedOn": "Hosted on",
+    "illustrationsBy": "Illustrations by"
   }
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -306,5 +306,39 @@
     "dashboard": "仪表盘",
     "settings": "设置",
     "logOut": "退出登录"
+  },
+  "Footer": {
+    "sections": {
+      "Company": {
+        "title": "公司",
+        "items": {
+          "About": "关于我们",
+          "Enterprise": "企业版",
+          "Terms": "服务条款",
+          "Privacy": "隐私政策"
+        }
+      },
+      "Product": {
+        "title": "产品",
+        "items": {
+          "Security": "安全性",
+          "Customization": "定制化",
+          "Customers": "客户",
+          "Changelog": "更新日志"
+        }
+      },
+      "Docs": {
+        "title": "文档",
+        "items": {
+          "Introduction": "介绍",
+          "Installation": "安装",
+          "Components": "组件",
+          "Code Blocks": "代码块"
+        }
+      }
+    },
+    "builtBy": "开发者",
+    "hostedOn": "托管于",
+    "illustrationsBy": "插图来自"
   }
 }