feat(i18n): add zh/en locale switching
This commit is contained in:
+10
-8
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user