Add header component with responsive navigation

components/NavItems.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { NAV_ITEMS } from "@/lib/constans";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const NavItems = () => {
+    const pathname = usePathname();
+    const isActive = (path: string) => {
+        if(path === '/') return pathname === '/';
+
+        return pathname.startsWith(path);
+    }
+  return (
+    <ul className="flex flex-col sm:flex-row p-2 gap-3 sm:gap-10 font-medium">
+        {NAV_ITEMS.map(({ label, href }) => {
+            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>
+            );
+        })}
+    </ul>
+  );
+};
+
+export default NavItems;