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