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>
+  );
+};

components/NavItems/index.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { NAV_ITEMS } from "@/lib/constans";
+import { NavItem } from "./NavItem";
+
+const NavItems = () => {
+  return (
+    <ul className="flex flex-col sm:flex-row p-2 gap-3 sm:gap-10 font-medium">
+      {NAV_ITEMS.map((item) => (
+        <NavItem key={item.href} item={item} />
+      ))}
+    </ul>
+  );
+};
+
+export default NavItems;