11 lines
5.0 KiB
JavaScript
11 lines
5.0 KiB
JavaScript
import{A as e,D as t,S as n,W as r,c as i,ct as a,l as o,m as s,o as c,ot as l,p as u,s as d,u as f,z as p}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as m}from"./Icon-D1Ud4H_f.js";import{t as h}from"./i18n-BxXwPz8H.js";import{t as g}from"./Badge-D2T2EdKQ.js";import{t as _}from"./Button-CajVMpo0.js";import{t as v}from"./SectionShell-CHsfR9Y3.js";var y=[`src`,`alt`],b={class:`flex flex-col gap-3 p-6`},x={class:`flex flex-col gap-1`},S={key:0,class:`text-sm text-muted tracking-label`},C={class:`mt-auto flex items-center justify-between gap-3 pt-2`},w={class:`font-display text-2xl font-normal text-brand`},T={key:0,class:`text-xs font-semibold tracking-label uppercase text-danger`},E={__name:`ProductCard`,props:{title:{type:String,required:!0},size:{type:String,default:``},price:{type:[String,Number],required:!0},currency:{type:String,default:`€`},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`].includes(e)},inStock:{type:Boolean,default:!0},href:{type:String,default:``}},emits:[`add`],setup(p){let v=p,{t:E}=h(),D={paper:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},O=c(()=>D[v.tone]),k=c(()=>typeof v.price==`number`?`${v.currency} ${v.price.toFixed(2).replace(`.`,`,`)}`:`${v.currency} ${v.price}`);return(c,h)=>(n(),f(`article`,{class:l([`group flex flex-col overflow-hidden rounded-md border transition-all duration-base ease-out`,O.value.surface,O.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[(n(),i(t(p.href?`a`:`div`),{href:p.href||null,class:l([`relative block aspect-[4/5] overflow-hidden`,O.value.media])},{default:e(()=>[p.badge?(n(),i(g,{key:0,variant:p.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:e(()=>[u(a(p.badge),1)]),_:1},8,[`variant`])):o(``,!0),d(`img`,{src:p.image,alt:p.imageAlt||p.title,loading:`lazy`,decoding:`async`,class:`absolute inset-0 w-full h-full object-contain p-8 transition-transform duration-slow ease-out group-hover:scale-105`},null,8,y)]),_:1},8,[`href`,`class`])),d(`div`,b,[d(`div`,x,[(n(),i(t(p.href?`a`:`h3`),{href:p.href||null,class:l([`font-display text-xl font-normal leading-tight text-ink`,p.href?`hover:text-brand transition-colors duration-base`:``])},{default:e(()=>[u(a(p.title),1)]),_:1},8,[`href`,`class`])),p.size?(n(),f(`p`,S,a(p.size),1)):o(``,!0)]),d(`div`,C,[d(`span`,w,a(k.value),1),p.inStock?o(``,!0):(n(),f(`span`,T,a(r(E)(`ds.product.outOfStock`)),1))]),s(_,{variant:`primary`,size:`md`,block:``,disabled:!p.inStock,onClick:h[0]||=e=>c.$emit(`add`)},{before:e(()=>[s(m,{name:`plus`,size:16})]),default:e(()=>[u(` `+a(r(E)(`ds.buttons.addToCart`)),1)]),_:1},8,[`disabled`])])],2))}},D={class:`eyebrow mb-5`},O={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},k={key:0,class:`mt-5 text-sm text-muted`},A={class:`font-mono text-[12px]`},j={class:`eyebrow mb-5`},M={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},N={class:`eyebrow mb-5`},P=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,F={__name:`ProductsSection`,setup(t){let{t:c}=h(),l=p(``);function m(e){l.value=e,setTimeout(()=>{l.value===e&&(l.value=``)},2e3)}return(t,p)=>(n(),i(v,{eyebrow:r(c)(`ds.eyebrow.components`),title:r(c)(`ds.product.title`),description:r(c)(`ds.product.description`)},{default:e(()=>[d(`section`,null,[d(`h2`,D,a(r(c)(`ds.heading.default`)),1),d(`div`,O,[s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,href:`#`,onAdd:p[0]||=e=>m(`pulver-250`)}),s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,badge:r(c)(`ds.badges.featured`),"badge-variant":`accent`,href:`#`,onAdd:p[1]||=e=>m(`pulver-250-featured`)},null,8,[`badge`]),s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,tone:`cream`,href:`#`,onAdd:p[2]||=e=>m(`pulver-250-cream`)})]),l.value?(n(),f(`p`,k,[u(a(r(c)(`ds.product.added`))+`: `,1),d(`code`,A,a(l.value),1)])):o(``,!0)]),d(`section`,null,[d(`h2`,j,a(r(c)(`ds.heading.states`)),1),d(`div`,M,[s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,"in-stock":!1}),s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,badge:r(c)(`ds.badges.newRelease`),"badge-variant":`brand`,href:`#`},null,8,[`badge`])])]),d(`section`,null,[d(`h2`,N,a(r(c)(`ds.heading.usage`)),1),p[3]||=d(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[d(`pre`,{class:`whitespace-pre-wrap`},`<ProductCard
|
|
title="Kaiser-Natron® Pulver"
|
|
size="250 g Großpackung"
|
|
:price="4.49"
|
|
image="/products/cutouts/…-removebg-preview.png"
|
|
badge="Bestseller"
|
|
badge-variant="accent"
|
|
tone="paper"
|
|
href="/kaiser-natron-pulver-250-g-grosspackung"
|
|
@add="addToCart(sku)"
|
|
/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{F as default}; |