102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { Link, useTranslation } from "@/i18n/navigation";
|
|
|
|
const footerSections = [
|
|
{
|
|
titleKey: "community" as const,
|
|
links: [
|
|
{ labelKey: "join" as const, href: "/join" },
|
|
{ labelKey: "meetups" as const, href: "/meetups" },
|
|
{ labelKey: "dating" as const, href: "/dating" },
|
|
{ labelKey: "map" as const, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
titleKey: "tools" as const,
|
|
links: [
|
|
{ labelKey: "dashboard" as const, href: "/dashboard" },
|
|
{ labelKey: "cost" as const, href: "/tools" },
|
|
{ labelKey: "ai" as const, href: "/ai" },
|
|
{ labelKey: "coworking" as const, href: "#" },
|
|
{ labelKey: "compare" as const, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
titleKey: "resources" as const,
|
|
links: [
|
|
{ labelKey: "guide" as const, href: "#" },
|
|
{ labelKey: "cityGuide" as const, href: "#" },
|
|
{ labelKey: "stories" as const, href: "#" },
|
|
{ labelKey: "report" as const, href: "/report" },
|
|
{ labelKey: "faq" as const, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
titleKey: "about" as const,
|
|
links: [
|
|
{ labelKey: "aboutUs" as const, href: "/about" },
|
|
{ labelKey: "pricing" as const, href: "/pricing" },
|
|
{ labelKey: "gigs" as const, href: "/gigs" },
|
|
{ labelKey: "recruit" as const, href: "/jobs" },
|
|
{ labelKey: "terms" as const, href: "#" },
|
|
{ labelKey: "privacy" as const, href: "#" },
|
|
{ labelKey: "contact" as const, href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function Footer() {
|
|
const { t } = useTranslation("footer");
|
|
|
|
return (
|
|
<footer className="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
|
|
<div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-10 sm:py-12">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mb-8">
|
|
{footerSections.map((section) => (
|
|
<div key={section.titleKey}>
|
|
<h4 className="font-bold text-gray-900 dark:text-gray-100 text-sm mb-3">
|
|
{t(section.titleKey)}
|
|
</h4>
|
|
<ul className="space-y-2 text-sm text-gray-500 dark:text-gray-400">
|
|
{section.links.map((link) => (
|
|
<li key={link.labelKey}>
|
|
{link.href.startsWith("/") ? (
|
|
<Link
|
|
href={link.href}
|
|
className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
|
|
>
|
|
{t(`links.${link.labelKey}`)}
|
|
</Link>
|
|
) : (
|
|
<a
|
|
href={link.href}
|
|
className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
|
|
>
|
|
{t(`links.${link.labelKey}`)}
|
|
</a>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="pt-8 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xl">🌏</span>
|
|
<span className="text-sm font-bold text-gray-900 dark:text-gray-100">游牧中国</span>
|
|
</div>
|
|
<p className="text-xs text-gray-400 dark:text-gray-500">
|
|
{t("copyright")}
|
|
</p>
|
|
<div className="flex items-center gap-4 text-xs text-gray-400 dark:text-gray-500">
|
|
<span>CNY ¥</span>
|
|
<span>°C</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|