14 lines
3.6 KiB
JavaScript
14 lines
3.6 KiB
JavaScript
import{B as e,C as t,G as n,T as r,c as i,ft as a,j as o,m as s,o as c,p as l,r as u,s as d,u as f,ut as p}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as m}from"./i18n-DK-nbHGh.js";import{t as h}from"./SectionShell-XUVs_07L.js";import{t as g}from"./DevicePreview-CxF-mErd.js";var _={role:`tablist`,"aria-label":`Layout variant`,class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},v=[`aria-selected`,`onClick`],y={class:`eyebrow mb-5`},b={__name:`BundlesSection`,setup(b){let{t:x}=m(),S=[{id:`sidebar`,label:`Option 1`},{id:`stacked`,label:`Option 2`}],C=e(`sidebar`),w=c(()=>`/design/preview/bundles?layout=${C.value}`);return(e,c)=>(t(),i(h,{eyebrow:n(x)(`ds.eyebrow.components`),title:n(x)(`ds.bundles.title`),description:n(x)(`ds.bundles.description`),wide:``},{default:o(()=>[d(`section`,null,[s(g,{src:w.value,initial:`desktop`,height:1080},{controls:o(()=>[d(`div`,_,[(t(),f(u,null,r(S,e=>d(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":C.value===e.id,class:p([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,C.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>C.value=e.id},a(e.label),11,v)),64))])]),_:1},8,[`src`])]),d(`section`,null,[d(`h2`,y,a(n(x)(`ds.heading.usage`)),1),c[0]||=d(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[d(`pre`,{class:`whitespace-pre-wrap`},`<Bundles
|
|
:bundles="bundles"
|
|
:headline="t('bundles.headline.a')"
|
|
:headline-em="t('bundles.headline.em')"
|
|
:sub="t('bundles.sub')"
|
|
:benefits="[
|
|
t('bundles.benefit.1.title'),
|
|
t('bundles.benefit.2.title'),
|
|
t('bundles.benefit.3.title'),
|
|
]"
|
|
:join-cta="t('bundles.joinCta')"
|
|
@add="addBundle(bundleId)"
|
|
@join="openSignup()"
|
|
/>`)],-1)]),c[1]||=d(`section`,null,[d(`h2`,{class:`eyebrow mb-5`},`Props`),d(`div`,{class:`rounded-md border border-line bg-paper overflow-x-auto`},[d(`table`,{class:`w-full text-left text-[13px]`},[d(`thead`,{class:`bg-surface border-b border-line`},[d(`tr`,null,[d(`th`,{class:`px-5 py-3 font-semibold tracking-label text-muted uppercase text-[11px]`},`Prop`),d(`th`,{class:`px-5 py-3 font-semibold tracking-label text-muted uppercase text-[11px]`},`Type`),d(`th`,{class:`px-5 py-3 font-semibold tracking-label text-muted uppercase text-[11px]`},`Purpose`)])]),d(`tbody`,{class:`divide-y divide-line`},[d(`tr`,null,[d(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`bundles`),d(`td`,{class:`px-5 py-3 text-muted`},`Array`),d(`td`,{class:`px-5 py-3`},`Required. Array of bundle records rendered by BundleCard.`)]),d(`tr`,null,[d(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`headline / headlineEm / sub`),d(`td`,{class:`px-5 py-3 text-muted`},`String`),d(`td`,{class:`px-5 py-3`},[l(`Sidebar copy; `),d(`code`,{class:`font-mono text-[12px]`},`headlineEm`),l(` is the italicised highlight.`)])]),d(`tr`,null,[d(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`benefits`),d(`td`,{class:`px-5 py-3 text-muted`},`String[]`),d(`td`,{class:`px-5 py-3`},`Sidebar benefit bullets. First three are shown.`)]),d(`tr`,null,[d(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`joinCta`),d(`td`,{class:`px-5 py-3 text-muted`},`String`),d(`td`,{class:`px-5 py-3`},[l(`Label for the sidebar's primary button. Emits `),d(`code`,{class:`font-mono text-[12px]`},`join`),l(`.`)])]),d(`tr`,null,[d(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`carousel*Label`),d(`td`,{class:`px-5 py-3 text-muted`},`String`),d(`td`,{class:`px-5 py-3`},`Override the default carousel a11y labels (prev / next / goToSlide / region label).`)])])])])],-1)]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{b as default}; |