49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import Link from "next/link";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
|
|
const navItems = [
|
|
{ key: "home", path: "" },
|
|
{ key: "portfolio", path: "/portfolio" },
|
|
{ key: "products", path: "/products" },
|
|
{ key: "about", path: "/about" },
|
|
{ key: "contact", path: "/contact" },
|
|
{ key: "root", path: "/root" },
|
|
];
|
|
|
|
export function Footer() {
|
|
const locale = useLocale();
|
|
const tNav = useTranslations("navigation");
|
|
const tFooter = useTranslations("footer");
|
|
|
|
return (
|
|
<footer className="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
|
|
<div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-8 sm:px-6 lg:px-8">
|
|
<nav className="flex flex-wrap gap-4 text-sm">
|
|
{navItems.map((item) => (
|
|
item.key === "root" ? (
|
|
<a
|
|
key={item.key}
|
|
href="/root"
|
|
className="text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
|
|
>
|
|
{tNav(item.key)}
|
|
</a>
|
|
) : (
|
|
<Link
|
|
key={item.key}
|
|
href={`/${locale}${item.path}`}
|
|
className="text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
|
|
>
|
|
{tNav(item.key)}
|
|
</Link>
|
|
)
|
|
))}
|
|
</nav>
|
|
<p className="text-xs text-zinc-500 dark:text-zinc-400">
|
|
{tFooter("copyright", { year: new Date().getFullYear() })}
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|