39 lines
788 B
TypeScript
39 lines
788 B
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
type NavItemProps = {
|
|
item: {
|
|
labelKey: string;
|
|
href: string;
|
|
};
|
|
};
|
|
|
|
export const NavItem: React.FC<NavItemProps> = ({
|
|
item: { labelKey, href },
|
|
}) => {
|
|
const pathname = usePathname();
|
|
const t = useTranslations();
|
|
|
|
const isActive = (path: string) => {
|
|
if (path === "/") return pathname === "/";
|
|
return pathname.startsWith(path);
|
|
};
|
|
|
|
const active = isActive(href);
|
|
const label = t(labelKey);
|
|
|
|
return (
|
|
<li key={href}>
|
|
<Link
|
|
href={href}
|
|
className={`transition-colors hover:text-yellow-500 ${active ? "font-bold text-gray-100" : ""}`}
|
|
>
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
};
|