8 lines
2.7 KiB
JavaScript
8 lines
2.7 KiB
JavaScript
import{A as e,S as t,W as n,c as r,ct as i,m as a,o,ot as s,p as c,r as l,s as u,st as d,u as f,w as p,z as m}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as h}from"./i18n-BxXwPz8H.js";import{t as g}from"./SectionShell-CHsfR9Y3.js";import{t as _}from"./DevicePreview-Dj1SP-lv.js";var v=[`aria-label`],y=[`aria-selected`,`onClick`],b=[`aria-label`],x=[`aria-selected`,`onClick`],S={class:`eyebrow mb-5`},C={__name:`NavbarSection`,setup(C){let{t:w}=h(),T=o(()=>[{id:`paper`,label:w(`ds.navbar.tone.paper`),swatch:`#ffffff`},{id:`cream`,label:w(`ds.navbar.tone.cream`),swatch:`var(--color-cream)`},{id:`brand`,label:w(`ds.navbar.tone.brand`),swatch:`var(--color-brand)`}]),E=o(()=>[{id:`standard`,label:w(`ds.navbar.layout.standard`)},{id:`floating`,label:w(`ds.navbar.layout.floating`)}]),D=m(`paper`),O=m(`standard`),k=o(()=>`/design/preview/navbar?variant=${D.value}&layout=${O.value}`);return(o,m)=>(t(),r(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.navbar.title`),description:n(w)(`ds.navbar.description`),wide:``},{default:e(()=>[u(`section`,null,[a(_,{src:k.value,initial:`mobile`,height:720},{controls:e(()=>[u(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.layout`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),f(l,null,p(E.value,e=>(t(),f(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:s([`px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,O.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>O.value=e.id},i(e.label),11,y))),128))],8,v),u(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.tone`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),f(l,null,p(T.value,e=>(t(),f(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:s([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,D.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>D.value=e.id},[u(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:d({backgroundColor:e.swatch})},null,4),c(` `+i(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),u(`section`,null,[u(`h2`,S,i(n(w)(`ds.heading.usage`)),1),m[0]||=u(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[u(`pre`,{class:`whitespace-pre-wrap`},`<Navbar
|
|
variant="paper"
|
|
layout="floating"
|
|
:items="[{ key: 'nav.shop', href: '/shop' }]"
|
|
:cart-count="2"
|
|
@cart="openCart"
|
|
@nav="onNav"
|
|
/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{C as default}; |