103 lines
3.8 KiB
TypeScript
103 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { Link, useTranslation } from "@/i18n/navigation";
|
|
|
|
const footerSections = [
|
|
{
|
|
titleKey: "guide" as const,
|
|
links: [
|
|
{ labelKey: "roadmap" as const, href: "#roadmap" },
|
|
{ labelKey: "tools" as const, href: "#tools" },
|
|
{ labelKey: "destinations" as const, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
titleKey: "resources" as const,
|
|
links: [
|
|
{ labelKey: "remoteJobs" as const, href: "#" },
|
|
{ labelKey: "visa" as const, href: "#" },
|
|
{ labelKey: "coliving" as const, href: "#" },
|
|
{ labelKey: "insurance" as const, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
titleKey: "community" as const,
|
|
links: [
|
|
{ labelKey: "discord" as const, href: "#" },
|
|
{ labelKey: "wechat" as const, href: "#community" },
|
|
{ labelKey: "jike" as const, href: "#" },
|
|
{ labelKey: "github" as const, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
titleKey: "about" as const,
|
|
links: [
|
|
{ labelKey: "aboutUs" as const, href: "/about", internal: true },
|
|
{ labelKey: "recruit" as const, href: "/jobs", internal: true },
|
|
{ labelKey: "privacy" as const, href: "/privacy", internal: true, openInNewTab: true },
|
|
{ labelKey: "contact" as const, href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function Footer() {
|
|
const { t } = useTranslation("footer");
|
|
return (
|
|
<footer className="border-t border-slate-100 bg-white dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
|
|
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-5">
|
|
<div className="lg:col-span-1">
|
|
<Link href="/" className="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
|
|
<span className="text-2xl">🌍</span>
|
|
<span>{t("siteName")}</span>
|
|
</Link>
|
|
<p className="mt-3 text-sm leading-relaxed text-slate-500 dark:text-slate-400">
|
|
{t("tagline")}
|
|
<br />
|
|
{t("tagline2")}
|
|
</p>
|
|
</div>
|
|
|
|
{footerSections.map((section) => (
|
|
<div key={section.titleKey}>
|
|
<h4 className="mb-4 text-sm font-bold text-slate-900 dark:text-slate-100">
|
|
{t(`sections.${section.titleKey}`)}
|
|
</h4>
|
|
<ul className="space-y-2.5">
|
|
{section.links.map((link) => (
|
|
<li key={link.labelKey}>
|
|
{"internal" in link && link.internal ? (
|
|
<Link
|
|
href={link.href}
|
|
target={"openInNewTab" in link && link.openInNewTab ? "_blank" : undefined}
|
|
rel={"openInNewTab" in link && link.openInNewTab ? "noopener noreferrer" : undefined}
|
|
className="text-sm text-slate-500 transition-colors hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
|
|
>
|
|
{t(`links.${link.labelKey}`)}
|
|
</Link>
|
|
) : (
|
|
<a
|
|
href={link.href}
|
|
className="text-sm text-slate-500 transition-colors hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
|
|
>
|
|
{t(`links.${link.labelKey}`)}
|
|
</a>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-100 pt-8 dark:border-slate-800 sm:flex-row">
|
|
<p className="text-sm text-slate-400 dark:text-slate-500">
|
|
{t("madeBy")}
|
|
</p>
|
|
<p className="text-sm text-slate-400 dark:text-slate-500">{t("openSource")}</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|