"use client"; import { useState } from "react"; import { Button, Badge, Input, BentoGrid, BentoGridCell, Tabs, TabsList, TabsTrigger, TabsContent, Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogClose, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, } from "@sigil-ui/components"; import { DemoShell, Panel, PanelSpacer, PanelHeader, PlaceholderImage, } from "./_shell"; interface Product { name: string; price: number; category: string; gradient: string; description: string; } const PRODUCTS: Product[] = [ { name: "Linen Overshirt", price: 128, category: "Tops", gradient: "linear-gradient(135deg, oklch(0.75 0.06 85) 0%, oklch(0.55 0.04 70) 100%)", description: "Relaxed-fit linen overshirt with dropped shoulders and horn buttons. Garment-dyed for a soft, lived-in feel.", }, { name: "Wide-Leg Trousers", price: 164, category: "Bottoms", gradient: "linear-gradient(135deg, oklch(0.6 0.03 250) 0%, oklch(0.4 0.02 230) 100%)", description: "High-rise wide-leg trousers in heavyweight cotton twill. Double-pleated front, slash pockets, cropped hem.", }, { name: "Merino Tee", price: 72, category: "Tops", gradient: "linear-gradient(135deg, oklch(0.65 0.08 160) 0%, oklch(0.45 0.05 145) 100%)", description: "17.5 micron merino wool crew neck. Naturally thermoregulating, odor-resistant, and incredibly soft.", }, { name: "Canvas Tote", price: 48, category: "Accessories", gradient: "linear-gradient(135deg, oklch(0.7 0.04 50) 0%, oklch(0.5 0.03 40) 100%)", description: "Heavy 16oz canvas tote with reinforced stitching. Interior zip pocket. Fits a 15-inch laptop.", }, { name: "Relaxed Chinos", price: 96, category: "Bottoms", gradient: "linear-gradient(135deg, oklch(0.55 0.05 30) 0%, oklch(0.35 0.03 20) 100%)", description: "Relaxed straight-leg chinos in brushed organic cotton. Enzyme-washed for softness from day one.", }, { name: "Leather Belt", price: 56, category: "Accessories", gradient: "linear-gradient(135deg, oklch(0.4 0.06 60) 0%, oklch(0.25 0.04 45) 100%)", description: "Full-grain vegetable-tanned leather belt with solid brass buckle. 30mm width. Ages beautifully.", }, ]; const CART_ITEMS = [ { name: "Linen Overshirt", size: "M", qty: 1, price: 128 }, { name: "Wide-Leg Trousers", size: "L", qty: 1, price: 164 }, { name: "Merino Tee", size: "S", qty: 2, price: 72 }, ]; const SIZES = ["S", "M", "L", "XL"] as const; function ProductCard({ product, featured = false, }: { product: Product; featured?: boolean; }) { const [size, setSize] = useState("M"); return ( ); } export default function EcommerceDemo() { const cartTotal = CART_ITEMS.reduce((sum, item) => sum + item.price * item.qty, 0); return ( {/* ── Navbar ──────────────────────────────────────────────── */}

KOVA

Your Cart 3 items

{CART_ITEMS.map((item) => (

{item.name} Size {item.size} · Qty {item.qty}

${item.price * item.qty}

))}

Total ${cartTotal}

{/* ── Hero ────────────────────────────────────────────────── */}

Spring Collection

Everyday essentials designed with intention. Natural materials, considered construction, built to last.

{/* ── Categories ──────────────────────────────────────────── */} Categories

{["All", "Tops", "Bottoms", "Accessories"].map((cat) => ( {cat} ))} {["All", "Tops", "Bottoms", "Accessories"].map((cat) => { const items = cat === "All" ? PRODUCTS : PRODUCTS.filter((p) => p.category === cat); return ( {items.map((product, i) => ( ))} ); })}

{/* ── Cart Preview ────────────────────────────────────────── */} Cart

3 items in cart Subtotal: ${cartTotal}

Your Cart 3 items

{CART_ITEMS.map((item) => (

{item.name} Size {item.size} · Qty {item.qty}

${item.price * item.qty}

))}

Total ${cartTotal}

{/* ── Footer ──────────────────────────────────────────────── */}

); }