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>
3 lines
1.9 KiB
JavaScript
3 lines
1.9 KiB
JavaScript
import{L as e,c as t,k as n,m as r,s as i,tt as a,x as o}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as s}from"./i18n-DuB4OiH1.js";import{t as c}from"./LanguageSwitcher-D_Yxx8cQ.js";import{t as l}from"./SectionShell-aXzaQlw9.js";import{t as u}from"./Card-SodW1h0q.js";var d={class:`eyebrow mb-5`},f={class:`grid md:grid-cols-3 gap-4`},p={class:`eyebrow mb-4`},m={class:`text-[13px] text-muted mt-4 leading-relaxed`},h={class:`eyebrow mb-4`},g={class:`text-[13px] text-muted mt-4 leading-relaxed`},_={class:`eyebrow mb-4`},v={class:`text-[13px] opacity-80 mt-4 leading-relaxed`},y={class:`eyebrow mb-5`},b={class:`text-[13px] text-muted max-w-2xl leading-relaxed`},x={class:`eyebrow mb-5`},S={__name:`LanguageSwitcherSection`,setup(S){let{t:C}=s();return(s,S)=>(o(),t(l,{eyebrow:e(C)(`ds.eyebrow.components`),title:e(C)(`ds.language.title`),description:e(C)(`ds.language.description`)},{default:n(()=>[i(`section`,null,[i(`h2`,d,a(e(C)(`ds.heading.onDifferentSurfaces`)),1),i(`div`,f,[r(u,{tone:`paper`},{default:n(()=>[i(`p`,p,a(e(C)(`ds.cards.paper`)),1),r(c,{tone:`paper`}),i(`p`,m,a(e(C)(`ds.language.paperNote`)),1)]),_:1}),r(u,{tone:`cream`},{default:n(()=>[i(`p`,h,a(e(C)(`ds.cards.cream`)),1),r(c,{tone:`cream`}),i(`p`,g,a(e(C)(`ds.language.creamNote`)),1)]),_:1}),r(u,{tone:`brand`},{default:n(()=>[i(`p`,_,a(e(C)(`ds.cards.brand`)),1),r(c,{tone:`brand`}),i(`p`,v,a(e(C)(`ds.language.brandNote`)),1)]),_:1})])]),i(`section`,null,[i(`h2`,y,a(e(C)(`ds.language.floating`)),1),r(u,{tone:`paper`},{default:n(()=>[i(`p`,b,a(e(C)(`ds.language.floatingNote`)),1)]),_:1})]),i(`section`,null,[i(`h2`,x,a(e(C)(`ds.heading.usage`)),1),S[0]||=i(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[i(`pre`,{class:`whitespace-pre-wrap`},`<LanguageSwitcher />
|
|
<LanguageSwitcher tone="brand" />
|
|
<LanguageSwitcher floating />`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default}; |