Refactor NavItems component

components/NavItems/NavItem.tsx

@@ -0,0 +1,33 @@
+"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>
+  );
+};