Template capabilities — design system, chrome, restaurant blocks, and interactive features.
3 fixture variants: full (allergens + description), minimal (no image / no allergens), variants (size picker → 'from X' price).
Click a card to select it.
Same 3 fixtures in row layout. Image slot collapses when imagePath is null.
Mock indépendant de PRODUCT_CTA_ENABLED. Grille + liste. Activez PRODUCT_CTA_ENABLED = true dans src/config/ux.ts pour l'activer en production.
CTA ONPRODUCT_CTA_ENABLED = true — bouton visible sur chaque article.
Mock indépendant de PRODUCT_CTA_ENABLED. Comportement par défaut actuel.
CTA OFFPRODUCT_CTA_ENABLED = false — bouton masqué (mode actuel par défaut).
Renders null when active=false. Click to reset; restore via the link below.
Controlled input with Command popover. Suggestions filter client-side; clear button appears when query is non-empty.
Multi-select dropdown. Pill trigger: inactive = outline, 1 selected = filled + category name, 2+ = filled + count badge. onSelect preventDefault keeps the menu open. Product counts shown per category. Clear button in panel header.
interactive
1 selected (static)
3 selected (static)
aucune sélection — toutes les catégories
Horizontal scrollable pill nav. Multi-select: empty = all categories. Reacts live — product count updates as categories are toggled.
9 produit(s) — toutes catégories
Same component with tree={[...]} prop. Sodas & Vins are depth-1 children of Boissons. Select any category to see the mini product list update.
7 produit(s) — toutes catégories
Margherita
11.90 €
Calzone Classique
14.90 €
Tiramisu Maison
7.90 €
Panna Cotta Fruits Rouges
6.90 €
Eau plate 50 cl
2.50 €
Limonade artisanale
4.50 €
Info-style pill trigger. Pretext explains the interaction. Checking an allergen hides dishes that contain it. Mini product list below reacts live.
9 plat(s) — aucun allergène exclu
Margherita
Gluten, Lactose
Quatre Saisons
Gluten, Lactose, Œufs
Calzone Classique
Gluten, Lactose
Salade César
Gluten, Lactose, Œufs, Poisson
Bruschetta Tomate
Gluten
Tiramisu Maison
Lactose, Œufs, Gluten
EU-14 allergens + vegetarian pseudo-allergen. Green circle = vegetarian; orange = EU allergen. Hover to see tooltip name. All icons from lucide-react (already a runtime dep).
size="sm" (default) — used in ProductCard
size="md" — used in ProductDrawer
vegetarianlucide:Carrotpseudo-allergen · greenglutenlucide:Wheateggslucide:Eggmilklucide:Milkfishlucide:Fishcrustaceanslucide:Shellpeanutslucide:Beansoybeanslucide:Beannutslucide:Nutsesamelucide:Sproutmustardlucide:Leafcelerylucide:Carrotlupinlucide:Flowersulphiteslucide:Atommolluscslucide:ShellFull browser wired to static fixture categories. Tests search + allergen filter + category nav + view toggle + ProductDrawer without Supabase.
9 résultat(s)
website.slug: "demo" · 3 categories · 7 products
7 résultat(s)