63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { Link, useTranslation } from "@/i18n/navigation";
|
|
import { FOOTER_SECTIONS } from "@/config";
|
|
|
|
function FooterComponent() {
|
|
const { t } = useTranslation("footer");
|
|
const { t: tCommon } = useTranslation("common");
|
|
|
|
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">
|
|
{FOOTER_SECTIONS.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">{tCommon("siteNameShort")}</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>{tCommon("currency") || "CNY ¥"}</span>
|
|
<span>°C</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
export default memo(FooterComponent);
|