555060eee3
DesignLayout now hides its 260px sidebar below lg and shows a fixed bottom bar surfacing the current page. Tapping it opens a 50svh bottom sheet with the full nav list (grouped, scrolls internally) plus the back-to-site link. Route changes auto-close the sheet and the backdrop is tap-to-dismiss. Hero split variant: drop the grid's items-center and add lg:justify-center on the copy column so the headline/CTA block now lines up with the image's vertical midpoint instead of sitting at the top. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 line
1.7 KiB
JavaScript
1 line
1.7 KiB
JavaScript
import{$ as e,C as t,P as n,et as r,m as i,o as a,p as o,r as s,s as c,tt as l,u,w as d,x as f}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as p}from"./Icon-BaDkTwYL.js";var m={class:`flex items-center gap-3 mb-4 flex-wrap`},h={role:`tablist`,"aria-label":`Preview viewport`,class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper ml-auto`},g=[`aria-selected`,`onClick`],_={class:`rounded-md border border-line bg-surface p-6 overflow-x-auto`},v=[`src`,`title`],y={class:`mt-2 text-center font-mono text-[11px] text-muted`},b={__name:`DevicePreview`,props:{src:{type:String,required:!0},initial:{type:String,default:`desktop`,validator:e=>[`mobile`,`tablet`,`desktop`].includes(e)},height:{type:Number,default:560}},setup(b){let x=b,S=[{id:`mobile`,label:`Mobile`,width:390},{id:`tablet`,label:`Tablet`,width:820},{id:`desktop`,label:`Desktop`,width:1280}],C=n(x.initial),w=a(()=>S.find(e=>e.id===C.value));return(n,a)=>(f(),u(`div`,null,[c(`div`,m,[d(n.$slots,`controls`),c(`div`,h,[(f(),u(s,null,t(S,t=>c(`button`,{key:t.id,type:`button`,role:`tab`,"aria-selected":C.value===t.id,class:e([`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===t.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:e=>C.value=t.id},[i(p,{name:t.id,size:14},null,8,[`name`]),o(` `+l(t.label),1)],10,g)),64))])]),c(`div`,_,[c(`div`,{class:`mx-auto transition-[width] duration-base ease-out`,style:r({width:w.value.width+`px`})},[c(`iframe`,{src:b.src,title:`${w.value.label} preview`,style:r({height:b.height+`px`}),class:`w-full block rounded-sm border border-line bg-paper`,loading:`lazy`},null,12,v),c(`p`,y,l(w.value.width)+`px `,1)],4)])]))}};export{b as t}; |