JIT
exploring color options in your code snippet
*/const wm=[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]],Sm=ro("X",wm),xm=()=>{},km=(u,a)=>{const s=C.useRef(xm);C.useEffect(()=>{s.current=a},[a]),C.useEffect(()=>{const f=p=>{const{action:h,data:x}=p.data;s.current&&h===u&&s.current(x)};return window.addEventListener("message",f),()=>window.removeEventListener("message",f)},[u])};function bl(u,a,s){let f=new XMLHttpRequest;f.open("POST",`https://${GetParentResourceName()}/${u}`,!0),f.setRequestHeader("Content-Type","application/json; charset=UTF-8"),f.onreadystatechange=function(){if(f.readyState===XMLHttpRequest.DONE)if(f.status===200){if(typeof s=="function")try{const p=JSON.parse(f.responseText);s(p)}catch{s(null,new Error("Failed to parse response JSON"))}}else typeof s=="function"&&s(null,new Error(`Error: ${f.status}`))},f.send(JSON.stringify(a))}function Cm(){const[u,a]=C.useState(0),[s,f]=C.useState(!0),[p,h]=C.useState(!1),[x,S]=C.useState(!1),[k,_]=C.useState([]),[R,j]=C.useState([]);function z($){const b=R.map(Z=>Z.plate===$?{...Z,amount:(Z.amount??0)+1}:Z);j(b)}function W($){const b=R.map(Z=>Z.plate===$?{...Z,amount:Math.max((Z.amount??0)-1,0)}:Z);j(b)}function Y(){const $=[];for(const b of R)b.amount!==void 0&&b.amount>0&&$.push(b);$.length>0&&(h(!0),bl("buyKeys",$,b=>{h(!1),b&&q()}))}function B($){const b=R.find(Z=>Z.plate===$);return b&&b.amount?(b==null?void 0:b.amount)*u:0}function U($){f(!0),bl("loadVehicles",$,b=>{b&&(j(b),f(!1))})}function q(){S(!1),bl("close")}return km("open",$=>{f(!0),a(parseFloat($.keyPrice)),_($.categories),S(!0),bl("loadVehicles",$.categories[0].database,b=>{b&&(j(b),f(!1))})}),L.jsx(L.Fragment,{children:x&&L.jsx("div",{className:"flex items-center justify-center h-screen text-white",children:L.jsxs("div",{className:"bg-background w-[30rem] h-[40rem] rounded-sm",children:[L.jsx("div",{className:"border-b p-3",children:L.jsxs("div",{className:"flex items-center justify-between",children:[L.jsxs("div",{className:"flex items-center gap-2",children:[L.jsx("img",{width:28,src:"https://r2.fivemanage.com/p9e8ccpnJkKno2ZIN2BgJ/images/vationvit.png",alt:""}),L.jsx("p",{className:"text-lg",children:"Låssmed"})]}),L.jsx(gn,{onClick:q,variant:"outline",size:"icon",className:"w-7 h-7",children:L.jsx(Sm,{})})]})}),L.jsxs("div",{className:"w-full",children:[L.jsx("nav",{className:"flex justify-center",children:k.map($=>L.jsx(gn,{variant:"link",onClick:()=>U($.database),children:$.label},$.database))}),L.jsx(Xc,{className:"h-[30.6rem]",children:s?L.jsxs("div",{className:"flex flex-col items-center justify-center h-[27rem] gap-1",children:[L.jsx(Ec,{size:30,className:"animate-spin"}),L.jsx("p",{className:"text-sm",children:"Laddar in fordon..."})]}):L.jsxs(Gc,{children:[L.jsx(bc,{children:L.jsxs(uu,{children:[L.jsx(Zl,{className:"w-[100px]",children:"Regnummer"}),L.jsx(Zl,{children:"Hantera"}),L.jsx(Zl,{className:"text-right",children:"Summa"})]})}),L.jsx(Zc,{children:R.map($=>L.jsxs(uu,{children:[L.jsx(Jl,{children:$.plate}),L.jsx(Jl,{className:"text-center",children:L.jsxs("div",{className:"flex items-center",children:[L.jsx(gn,{onClick:()=>W($.plate),variant:"outline",size:"icon",className:"w-7 h-7",children:L.jsx(gm,{})}),L.jsx("div",{className:"w-7 h-7 flex items-center justify-center",children:L.jsx("p",{children:$.amount||0})}),L.jsx(gn,{onClick:()=>z($.plate),variant:"outline",size:"icon",className:"w-7 h-7",children:L.jsx(ym,{})})]})}),L.jsxs(Jl,{className:"text-right",children:[B($.plate)," SEK"]})]},$.plate))})]})}),L.jsx("div",{className:"p-2",children:p?L.jsxs(gn,{disabled:!0,className:"w-full",children:[L.jsx(Ec,{className:"animate-spin"}),"Kopierar nycklar..."]}):L.jsx(gn,{onClick:Y,className:"w-full",children:"Slutför köp"})})]})]})})})}np.createRoot(document.getElementById("root")).render(L.jsx(C.StrictMode,{children:L.jsx(Cm,{})})); FINNS DE NÅGRA FÄRGER I DENNA ISÅFALL VILKA
Updated files
v1