feat(i18n): add zh/en locale switching

This commit is contained in:
Leon-in
2026-04-29 10:36:24 +08:00
parent 437dc976fb
commit 3213f00b7b
11 changed files with 915 additions and 33 deletions
+10 -8
View File
@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from "react"
import Image from "next/image"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useTranslations } from "next-intl"
import ThemeToggle from "@/components/ThemeToggle"
import { NAV_GROUPS, NAV_LINKS } from "@/lib/site-content"
@@ -24,6 +25,7 @@ function DropdownIcon() {
}
export default function Header() {
const t = useTranslations("nav")
const [mobileOpen, setMobileOpen] = useState(false)
const [dropdownOpen, setDropdownOpen] = useState(false)
const [scrolled, setScrolled] = useState(false)
@@ -82,7 +84,7 @@ export default function Header() {
<ChevronIcon />
</div>
</div>
<div className="link-text">{label}</div>
<div className="link-text">{label === "首页" ? t("home") : label === "产品定位" ? t("about") : label === "洞察" ? t("blog") : t("contact")}</div>
</Link>
</li>
))}
@@ -98,7 +100,7 @@ export default function Header() {
aria-expanded={dropdownOpen}
type="button"
>
<div>Explore</div>
<div>{t("explore")}</div>
<div className="dropdown-icon">
<DropdownIcon />
</div>
@@ -109,14 +111,14 @@ export default function Header() {
<div className="w-layout-grid header-dropdown-grid">
{NAV_GROUPS.map((group) => (
<div key={group.title}>
<div className="dropdown-title">{group.title}</div>
<div className="dropdown-title">{group.title === "产品" ? t("groups.product") : t("groups.content")}</div>
<div className="w-layout-grid pages-column">
{group.links.map(({ href, label }) => (
<Link key={href} href={href} className="link w-inline-block" onClick={closeMenus}>
<div className="link-icon-wrapper">
<div className="link-icon"><ChevronIcon /></div>
</div>
<div className="link-text">{label}</div>
<div className="link-text">{label === "首页" ? t("groupLinks.home") : label === "为什么是 DAL Code" ? t("groupLinks.whyDalCode") : label === "申请试用" ? t("groupLinks.applyTrial") : label === "产品洞察" ? t("groupLinks.insights") : t("groupLinks.buildingRoles")}</div>
</Link>
))}
</div>
@@ -131,7 +133,7 @@ export default function Header() {
<li className="link-nav-item mbl-button">
<Link href="/contact" className="primary-button w-inline-block" onClick={closeMenus}>
<div className="button-content">
<div></div>
<div>{t("applyTrial")}</div>
<div className="button-icon-wrapper primary">
<ChevronIcon />
<div className="button-icon-bg" />
@@ -146,7 +148,7 @@ export default function Header() {
<div className="show-light-mode">
<Link href="/contact" className="primary-button w-inline-block" onClick={closeMenus}>
<div className="button-content">
<div></div>
<div>{t("applyTrial")}</div>
<div className="button-icon-wrapper primary">
<ChevronIcon />
<div className="button-icon-bg" />
@@ -158,7 +160,7 @@ export default function Header() {
<div className="show-dark-mode">
<Link href="/contact" className="secondary-button w-inline-block" onClick={closeMenus}>
<div className="button-content">
<div></div>
<div>{t("applyTrial")}</div>
<div className="button-icon-wrapper secondary">
<ChevronIcon />
<div className="button-icon-bg bg-neutral-800" />
@@ -172,7 +174,7 @@ export default function Header() {
<button
className={`hamburger-menu w-nav-button ${mobileOpen ? "w--open" : ""}`}
onClick={toggleMobile}
aria-label="Toggle menu"
aria-label={t("toggleMenu")}
type="button"
>
<div className="hamburger-menu-flex">