assets/CssGridEditor-Ct_gd1L2.js

import{r as o,j as e}from"./react-D_B_5QVd.js";import{k as g}from"./index-QBya0NjG.js";import"./jszip-C9ownNzX.js";import"./react-dom-EAO2-NBm.js";import"./scheduler-DYLXRpC5.js";import"./@google-4tyssLU_.js";import"./idb-Dob3nYDb.js";const w=()=>{const[a,d]=o.useState(3),[l,i]=o.useState(4),[t,m]=o.useState(1),[r,p]=o.useState(1),x={display:"grid",gridTemplateColumns:`repeat(${l}, 1fr)`,gridTemplateRows:`repeat(${a}, 1fr)`,gap:`${t}rem ${r}rem`,height:"100%",width:"100%"},n=o.useMemo(()=>`.grid-container {
  display: grid;
  grid-template-columns: repeat(${l}, 1fr);
  grid-template-rows: repeat(${a}, 1fr);
  gap: ${t}rem ${r}rem;
}`,[a,l,t,r]),u=()=>{navigator.clipboard.writeText(n)};return e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl font-bold text-slate-100 flex items-center",children:[e.jsx(g,{}),e.jsx("span",{className:"ml-3",children:"CSS Grid Visual Editor"})]}),e.jsx("p",{className:"text-slate-400 mt-1",children:"Configure your grid layout and copy the generated CSS."})]}),e.jsxs("div",{className:"flex-grow grid grid-cols-1 lg:grid-cols-3 gap-6 min-h-0",children:[e.jsxs("div",{className:"lg:col-span-1 flex flex-col gap-4 bg-slate-800/50 p-6 rounded-lg",children:[e.jsx("h3",{className:"text-xl font-bold",children:"Controls"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsxs("label",{htmlFor:"rows",className:"block text-sm font-medium text-slate-400",children:["Rows (",a,")"]}),e.jsx("input",{id:"rows",type:"range",min:"1",max:"12",value:a,onChange:s=>d(Number(s.target.value)),className:"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer"})]}),e.jsxs("div",{children:[e.jsxs("label",{htmlFor:"cols",className:"block text-sm font-medium text-slate-400",children:["Columns (",l,")"]}),e.jsx("input",{id:"cols",type:"range",min:"1",max:"12",value:l,onChange:s=>i(Number(s.target.value)),className:"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer"})]}),e.jsxs("div",{children:[e.jsxs("label",{htmlFor:"rowGap",className:"block text-sm font-medium text-slate-400",children:["Row Gap (",t,"rem)"]}),e.jsx("input",{id:"rowGap",type:"range",min:"0",max:"8",step:"0.25",value:t,onChange:s=>m(Number(s.target.value)),className:"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer"})]}),e.jsxs("div",{children:[e.jsxs("label",{htmlFor:"colGap",className:"block text-sm font-medium text-slate-400",children:["Column Gap (",r,"rem)"]}),e.jsx("input",{id:"colGap",type:"range",min:"0",max:"8",step:"0.25",value:r,onChange:s=>p(Number(s.target.value)),className:"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer"})]})]}),e.jsxs("div",{className:"flex-grow mt-4",children:[e.jsx("label",{className:"block text-sm font-medium text-slate-400 mb-2",children:"Generated CSS"}),e.jsxs("div",{className:"relative h-full",children:[e.jsx("pre",{className:"bg-slate-900 p-4 rounded-md text-cyan-300 text-sm overflow-auto h-full",children:n}),e.jsx("button",{onClick:u,className:"absolute top-2 right-2 px-2 py-1 bg-slate-700 hover:bg-slate-600 rounded-md text-xs",children:"Copy"})]})]})]}),e.jsx("div",{className:"lg:col-span-2 bg-slate-900 rounded-lg p-4",children:e.jsx("div",{style:x,children:Array.from({length:a*l}).map((s,c)=>e.jsx("div",{className:"bg-cyan-500/20 rounded-lg border-2 border-dashed border-cyan-400/50 flex items-center justify-center text-cyan-300",children:e.jsx("span",{className:"text-xs opacity-70",children:c+1})},c))})})]})]})};export{w as CssGridEditor};
//# sourceMappingURL=CssGridEditor-Ct_gd1L2.js.map