https://www.bluefieldagency.com/assets/CaseTiles-2KZus5Jm.js

1import{i as W,r as l,j as t,L as R}from"./index-EZpXbSMK.js";import{C as z}from"./chevron-right-0uXG5fdh.js";const M=[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]],$=W("chevron-left",M);function S({children:d,trackClassName:u="",trackStyle:h,className:s="",controlsClassName:f="",label:r}){const a=l.useRef(null),[p,E]=l.useState(!1),[b,N]=l.useState(!1),n=l.useCallback(()=>{const e=a.current;if(!e)return;const i=e.scrollWidth-e.clientWidth;E(e.scrollLeft>4),N(e.scrollLeft<i-4)},[]);l.useEffect(()=>{const e=a.current;if(!e)return;n(),e.addEventListener("scroll",n,{passive:!0}),window.addEventListener("resize",n);const i=window.setTimeout(n,400);return()=>{e.removeEventListener("scroll",n),window.removeEventListener("resize",n),window.clearTimeout(i)}},[n]),l.useEffect(()=>{const e=a.current;if(!e)return;let i=!1,x=0,y=0,m=!1;const j=o=>{o.pointerType==="mouse"&&(i=!0,m=!1,x=o.clientX,y=e.scrollLeft)},L=o=>{if(!i)return;const c=o.clientX-x;Math.abs(c)>4&&(m=!0,e.style.cursor="grabbing",e.scrollLeft=y-c,o.preventDefault())},k=o=>{if(i&&(i=!1,e.style.cursor="",m)){const c=C=>C.preventDefault();e.addEventListener("click",c,{capture:!0,once:!0}),window.setTimeout(()=>e.removeEventListener("click",c,{capture:!0}),50)}};return e.addEventListener("pointerdown",j),window.addEventListener("pointermove",L,{passive:!1}),window.addEventListener("pointerup",k),()=>{e.removeEventListener("pointerdown",j),window.removeEventListener("pointermove",L),window.removeEventListener("pointerup",k)}},[]);const w=e=>{const i=a.current;i&&i.scrollBy({left:e*i.clientWidth*.85,behavior:"smooth"})},g=e=>({borderColor:"var(--bf-border)",color:"var(--bf-ink)",opacity:e?1:.3});return t.jsxs("div",{className:s,children:[t.jsx("div",{ref:a,className:`flex overflow-x-auto snap-x snap-mandatory bf-noscrollbar ${u}`,style:h,"aria-label":r,children:d}),t.jsxs("div",{className:`mt-4 flex items-center justify-end gap-3 ${f}`,children:[t.jsx("button",{type:"button",onClick:()=>w(-1),disabled:!p,"aria-label":"Vorige",className:"flex h-11 w-11 items-center justify-center rounded-full border transition-opacity duration-200",style:g(p),children:t.jsx($,{className:"h-5 w-5","aria-hidden":"true"})}),t.jsx("button",{type:"button",onClick:()=>w(1),disabled:!b,"aria-label":"Volgende",className:"flex h-11 w-11 items-center justify-center rounded-full border transition-opacity duration-200",style:g(b),children:t.jsx(z,{className:"h-5 w-5","aria-hidden":"true"})})]})]})}const v=[{width:"45%",height:420,mobileWidth:"80%",mobileHeight:320},{width:"30%",height:340,mobileWidth:"68%",mobileHeight:270},{width:"20%",height:260,mobileWidth:"56%",mobileHeight:220}];function B({items:d,className:u="",label:h}){return t.jsx(S,{className:u,trackClassName:"items-start gap-x-4 md:gap-x-9 md:overflow-visible",controlsClassName:"md:hidden",label:h,children:d.slice(0,3).map((s,f)=>{const r=v[f]??v[v.length-1];return t.jsx("div",{className:"shrink-0 snap-start w-[var(--tile-w-sm)] h-[var(--tile-h-sm)] md:shrink md:w-[var(--tile-w)] md:h-[var(--tile-h)] lg:h-[var(--tile-h-lg)]",style:{"--tile-w-sm":r.mobileWidth,"--tile-h-sm":`${r.mobileHeight}px`,"--tile-w":r.width,"--tile-h":`${Math.round(r.height*.8)}px`,"--tile-h-lg":`${r.height}px`},children:t.jsxs(R,{to:"/inzichten/cases/$slug",params:{slug:s.slug},className:"group relative block h-full w-full overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bf-primary)] focus-visible:ring-offset-2",style:{borderRadius:"var(--radius-tile)"},children:[s.image?t.jsx("img",{src:s.image,alt:s.title,loading:"lazy",draggable:!1,className:"absolute inset-0 h-full w-full object-cover"}):t.jsx("div",{className:"absolute inset-0 bg-[var(--bf-ink)]/10","aria-hidden":"true"}),t.jsx("div",{className:"absolute inset-0 opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100 group-focus-visible:opacity-100",style:{backgroundColor:"#1E00FF",mixBlendMode:"multiply"}}),t.jsxs("div",{className:"absolute inset-0 flex flex-col justify-between p-6",children:[t.jsx("h3",{className:"not-italic font-bold text-white text-2xl md:text-3xl max-w-[12ch] opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100 group-focus-visible:opacity-100",style:{fontFamily:"var(--font-body)"},children:s.title}),t.jsx("span",{className:"inline-flex h-10 w-10 items-center justify-center rounded-full text-[var(--bf-ink)]",style:{backgroundColor:"var(--bf-primary-green)"},"aria-hidden":"true",children:t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t.jsx("path",{d:"M8 3v10M3 8h10",

1stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})})]})]})},s.slug)})})}export{B as C,S};