7b44260fbc
Adds a client-side fuzzy product search to the design system: - `src/api/products.js`: fixture catalogue (22 products across the Kaiser Natron, Holste, Gazelle, Grüne Tante and Linda ranges) plus a scored, diacritic-folded search (ß→ss, ä→ae, NFKD) with weighted fields (title 5, brand/keywords 3, size/category 2, id 1) and prefix bonus. - `Search.vue`: tone-driven (brand/paper/cream) full-screen overlay on mobile, centered modal on md+. Auto-focus, arrow-key nav, Enter/Esc, suggested-products empty state, keyboard-hint footer on desktop, safe- area aware, scroll-locks the document while open. - Navbar now hosts two triggers: a pill-shaped "Search products" lookalike (desktop, in the same LanguageSwitcher-style container) and a green/accent shadow-sm floating button bottom-left on mobile. Both open the same overlay. - HomePage feeds the products list into Navbar. - Design-system showcase (`/design/search`) with live demo + canned result preview + usage snippet. Sidebar + mobile bottom-nav entries and DE/EN i18n added. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 line
810 B
JavaScript
1 line
810 B
JavaScript
import{$ as e,l as t,s as n,tt as r,u as i,w as a,x as o}from"./runtime-core.esm-bundler-CjdnoyKJ.js";var s={class:`mb-14 max-w-2xl`},c={class:`eyebrow mb-3`},l={class:`font-display text-5xl font-normal tracking-tight leading-[1.05] text-ink`},u={key:0,class:`mt-5 text-[17px] text-muted leading-relaxed`},d={class:`space-y-16`},f={__name:`SectionShell`,props:{eyebrow:{type:String,default:`Design system`},title:{type:String,required:!0},description:{type:String,default:``},wide:{type:Boolean,default:!1}},setup(f){return(p,m)=>(o(),i(`div`,{class:e([`mx-auto py-16`,f.wide?`max-w-none px-6 lg:px-8`:`max-w-5xl px-10 lg:px-16`])},[n(`header`,s,[n(`p`,c,r(f.eyebrow),1),n(`h1`,l,r(f.title),1),f.description?(o(),i(`p`,u,r(f.description),1)):t(``,!0)]),n(`div`,d,[a(p.$slots,`default`)])],2))}};export{f as t}; |