https://dakotaseal.com/assets/BeforeAfter-BOQOWQy4.js

1import{r as s,j as e}from"./index-CWZtlQ0X.js";function x({before:f,after:p,alt:l="Before and after"}){const[i,c]=s.useState(50),n=s.useRef(null),o=s.useRef(!1);return s.useEffect(()=>{const a=r=>{if(!n.current)return;const u=n.current.getBoundingClientRect(),h=Math.max(0,Math.min(100,(r-u.left)/u.width*100));c(h)},t=r=>{o.current&&(r.preventDefault(),a(r.clientX))},d=()=>{o.current=!1};return window.addEventListener("pointermove",t),window.addEventListener("pointerup",d),()=>{window.removeEventListener("pointermove",t),window.removeEventListener("pointerup",d)}},[]),e.jsxs("div",{ref:n,className:"relative aspect-[4/3] w-full overflow-hidden rounded-lg select-none touch-none cursor-ew-resize bg-asphalt",onPointerDown:a=>{o.current=!0;const t=n.current.getBoundingClientRect();c(Math.max(0,Math.min(100,(a.clientX-t.left)/t.width*100)))},children:[e.jsx("img",{src:p,alt:`${l} — after`,className:"absolute inset-0 w-full h-full object-cover",loading:"lazy"}),e.jsx("div",{className:"absolute inset-0 overflow-hidden",style:{clipPath:`inset(0 ${100-i}% 0 0)`},children:e.jsx("img",{src:f,alt:`${l} — before`,className:"w-full h-full object-cover",loading:"lazy"})}),e.jsx("div",{className:"absolute top-0 bottom-0 w-0.5 bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.3)]",style:{left:`${i}%`},children:e.jsx("div",{className:"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-xl grid place-items-center text-[var(--brand-asphalt)] font-bold",children:"⇆"})}),e.jsx("span",{className:"absolute top-3 left-3 bg-black/70 text-white text-xs font-bold uppercase tracking-wider px-2 py-1 rounded",children:"Before"}),e.jsx("span",{className:"absolute top-3 right-3 bg-primary text-white text-xs font-bold uppercase tracking-wider px-2 py-1 rounded",children:"After"})]})}export{x as B};