Initial commit

components/Header.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React from 'react';
+import Link from 'next/link';
+import { RiShoppingBagLine } from '@remixicon/react';
+import { useShopifyCart } from '@/hooks/use-shopify-cart';
+import config from '../lib/config.json';
+
+const CartIcon: React.FC = () => {
+  const { itemCount, toggleCart } = useShopifyCart();
+
+  return (
+    <button
+      onClick={toggleCart}
+      className="relative p-2 text-black hover:text-gray-600 transition-colors"
+    >
+      <RiShoppingBagLine className="text-2xl" />
+      {itemCount > 0 && (
+        <span className="absolute -top-1 -right-1 bg-black text-white text-xs rounded-full w-6 h-6 flex items-center justify-center font-semibold">
+          {itemCount > 99 ? '99+' : itemCount}
+        </span>
+      )}
+    </button>
+  );
+};
+
+const Header: React.FC = () => {
+  return (
+    <nav className="bg-white shadow-sm sticky top-0 z-30 h-16">
+      <div className="container mx-auto px-4 h-full">
+        <div className="flex justify-between items-center h-full">
+          {/* Logo */}
+          <Link href="/" className="text-2xl font-bold text-black font-heading">
+            {config.brand.logo.url ? (
+              <img
+                src={config.brand.logo.url}
+                alt={config.brand.logo.alt || 'Store'}
+                className="h-8"
+              />
+            ) : (
+              'Store'
+            )}
+          </Link>
+
+          {/* Cart Icon */}
+          <CartIcon />
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Header;