import{u as _}from"./designStore-f93d210d.js";import{m as v,x as g,c as s,F as c,r as i,b as n,o as t,t as x,n as f,u as b,d as C,e as $}from"./app-13978987.js";import"./fabric-1ff51d4a.js";const y=n("h3",{class:"mb-4"},"Shapes",-1),S=["onClick"],k={key:0,class:"grid grid-cols-3 gap-x-4 gap-y-5 p-3"},z=["onClick"],D={alt:"shape"},V={__name:"ShapeTab",props:["shapes"],setup(u){const p=_(),a=v([]),d=l=>{const r=a.value.indexOf(l);r>=0?a.value.splice(r,1):a.value.push(l)};return(l,r)=>{const h=g("lazy");return t(),s(c,null,[y,(t(!0),s(c,null,i(u.shapes,(m,e)=>(t(),s("div",{key:e,class:"mb-2"},[n("button",{class:"flex w-full items-center justify-between rounded-md bg-secondary-100 px-4 py-2 text-left capitalize dark:bg-secondary-900",onClick:o=>d(e)},[n("span",null,x(e.replace("_"," ")),1),n("i",{class:f(["bx bx-chevron-right text-xl transition-transform",{"rotate-90":a.value.includes(e)}])},null,2)],8,S),a.value.includes(e)?(t(),s("div",k,[(t(!0),s(c,null,i(m,o=>(t(),s("button",{key:o,onClick:w=>b(p).setShape(`/assets/shapes/${e}/${o}`)},[C(n("img",D,null,512),[[h,`/assets/shapes/${e}/${o}`]])],8,z))),128))])):$("",!0)]))),128))],64)}}};export{V as default};
