Initial commit: Shopify storefront Next.js template

Next.js 16 + React 19 storefront template with Shopify Storefront API integration, Tailwind v4, and shadcn/ui components. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0111qSr3KopyGRsJ6LznR1xZ
2026-07-31 22:12:19 -04:00
commit e3d5e75299
69 changed files with 7960 additions and 0 deletions
@@ -0,0 +1,125 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useCartStore } from '@/hooks/use-shopify-cart';
+import CartDrawer from '@/components/shopify/cart-drawer';
+import { RiShoppingCartLine, RiCloseLine, RiMenu3Line } from '@remixicon/react';
+
+const CartIcon: React.FC = () => {
+  const toggleCart = useCartStore((s) => s.toggleCart);
+  const cart = useCartStore((s) => s.cart);
+  const itemCount =
+    cart?.lines?.edges?.reduce((sum, { node }) => sum + node.quantity, 0) ?? 0;
+
+  return (
+    <button
+      onClick={toggleCart}
+      className="relative p-2.5 text-foreground hover:text-primary transition-all duration-200 rounded-full hover:bg-secondary"
+    >
+      <RiShoppingCartLine size={20} />
+      {itemCount > 0 && (
+        <span className="absolute -top-0.5 -right-0.5 bg-primary text-primary-foreground text-[10px] font-mono rounded-full w-5 h-5 flex items-center justify-center font-semibold shadow">
+          {itemCount > 99 ? '99+' : itemCount}
+        </span>
+      )}
+    </button>
+  );
+};
+
+export interface NavLink {
+  label: string;
+  url: string;
+}
+
+interface HeaderProps {
+  storeName?: string;
+  logoUrl?: string;
+  links?: NavLink[];
+}
+
+const Header: React.FC<HeaderProps> = ({
+  storeName = 'STRIDE',
+  logoUrl,
+  links = [
+    { label: 'Shop', url: '/' },
+    { label: 'Collections', url: '/collections' },
+  ],
+}) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <nav className="bg-white/95 backdrop-blur-md border-b border-border sticky top-0 z-50">
+      <div className="max-w-screen-2xl mx-auto px-8">
+        <div className="flex justify-between items-center h-20">
+          {/* Logo */}
+          <Link href="/" className="flex items-center group">
+            {logoUrl ? (
+              <img
+                src={logoUrl}
+                alt={storeName}
+                className="h-9 w-auto object-contain"
+              />
+            ) : (
+              <span className="text-4xl font-semibold tracking-tighter font-poppins text-foreground group-hover:text-primary transition-colors">
+                {storeName}
+              </span>
+            )}
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-x-10 text-sm font-medium">
+            {links.map((link, index) => (
+              <Link
+                key={index}
+                href={link.url}
+                className="text-foreground hover:text-primary relative after:absolute after:bottom-[-2px] after:left-0 after:h-[2px] after:w-0 after:bg-primary after:transition-all hover:after:w-full"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-x-2">
+            <CartIcon />
+
+            {/* Mobile hamburger */}
+            <button
+              onClick={() => setMenuOpen(!menuOpen)}
+              className="md:hidden p-2.5 text-foreground hover:text-primary transition-all rounded-full hover:bg-secondary"
+              aria-label="Toggle menu"
+            >
+              {menuOpen ? <RiCloseLine size={28} /> : <RiMenu3Line size={28} />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <div className="md:hidden border-t bg-white">
+          <div className="max-w-screen-2xl mx-auto px-8 py-8 flex flex-col gap-y-6 text-lg font-medium">
+            {links.map((link, index) => (
+              <Link
+                key={index}
+                href={link.url}
+                onClick={() => setMenuOpen(false)}
+                className="text-foreground hover:text-primary transition-colors py-1"
+              >
+                {link.label}
+              </Link>
+            ))}
+            <div className="pt-4 border-t text-xs text-muted-foreground font-mono tracking-widest">
+              PROFESSIONAL • CLEAN • MODERN
+            </div>
+          </div>
+        </div>
+      )}
+
+      <CartDrawer />
+    </nav>
+  );
+};
+
+export default Header;