1 line
2.9 KiB
JavaScript
1 line
2.9 KiB
JavaScript
import{j as e}from"./jsx-runtime.ClP7wGfN.js";import{r as h}from"./index.DK-fsZOb.js";function n(t){return Number.isFinite(t)?new Intl.NumberFormat("en-US",{style:"currency",currency:"USD"}).format(t):"$0.00"}function g(t){const i=h.useMemo(()=>[...t.steps].sort((s,r)=>s.receipts-r.receipts),[t.steps]),[l,c]=h.useState(0),a=i[Math.min(Math.max(l,0),i.length-1)],p=a.unitUsd,o=a.receipts,d=a.monthlyUsd,x=o*t.paygUnitUsd,m=x-d;return e.jsxs("div",{className:"rounded-2xl border border-white/10 bg-white/5 p-5 shadow-[0_16px_60px_rgba(0,0,0,0.35)]",children:[e.jsxs("div",{className:"flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"text-xs font-medium uppercase tracking-wide text-white/50",children:"Monthly volume"}),e.jsxs("div",{className:"mt-1 text-2xl font-semibold tracking-tight text-white/90",children:[o.toLocaleString()," receipts"]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3",children:[e.jsxs("div",{className:"rounded-xl border border-white/10 bg-slate-950/30 px-3 py-2",children:[e.jsx("div",{className:"text-[11px] text-white/60",children:"Unit price"}),e.jsx("div",{className:"mt-1 text-sm font-semibold text-white/90",children:n(p)})]}),e.jsxs("div",{className:"rounded-xl border border-white/10 bg-slate-950/30 px-3 py-2",children:[e.jsx("div",{className:"text-[11px] text-white/60",children:"Subscription"}),e.jsx("div",{className:"mt-1 text-sm font-semibold text-white/90",children:n(d)})]}),e.jsxs("div",{className:"hidden rounded-xl border border-white/10 bg-slate-950/30 px-3 py-2 sm:block",children:[e.jsx("div",{className:"text-[11px] text-white/60",children:"PAYG equivalent"}),e.jsx("div",{className:"mt-1 text-sm font-semibold text-white/90",children:n(x)})]})]})]}),e.jsxs("div",{className:"mt-5",children:[e.jsx("input",{"aria-label":"Select monthly receipt volume",className:"w-full accent-[oklch(var(--primary))]",type:"range",min:0,max:Math.max(0,i.length-1),step:1,value:l,onChange:s=>c(Number.parseInt(s.target.value,10))}),e.jsx("div",{className:"mt-3 flex flex-wrap items-center gap-2",children:i.map((s,r)=>e.jsx("button",{type:"button",onClick:()=>c(r),className:"rounded-full border px-3 py-1 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background "+(r===l?"border-white/25 bg-white/10 text-white":"border-white/10 bg-white/5 text-white/70 hover:bg-white/10 hover:text-white"),children:s.receipts.toLocaleString()},s.receipts))})]}),e.jsx("div",{className:"mt-4 text-sm text-white/70",children:m>0?e.jsxs("span",{children:["At this volume, subscription is about ",e.jsx("span",{className:"font-semibold text-white/90",children:n(m)})," less than PAYG."]}):e.jsx("span",{children:"At this volume, subscription and PAYG are within the same range."})})]})}export{g as PricingCalculator};
|