assets/CssGridEditor-DgTOpvXn.js

import{r as n,j as e}from"./react-D_B_5QVd.js";import{l as y,A as f}from"./index-CPYWJ7h_.js";import{d as j}from"./fileUtils-Dvg4vqd5.js";import"./jszip-C9ownNzX.js";import"./react-dom-EAO2-NBm.js";import"./scheduler-DYLXRpC5.js";import"./@google-4tyssLU_.js";import"./marked-CesSW9Du.js";import"./idb-Dob3nYDb.js";const r={rows:3,cols:4,rowGap:1,colGap:1},F=()=>{const[a,c]=n.useState(r.rows),[t,i]=n.useState(r.cols),[l,m]=n.useState(r.rowGap),[o,x]=n.useState(r.colGap),g={display:"grid",gridTemplateColumns:`repeat(${t}, 1fr)`,gridTemplateRows:`repeat(${a}, 1fr)`,gap:`${l}rem ${o}rem`,height:"100%",width:"100%"},d=n.useMemo(()=>`.grid-container {
  display: grid;
  grid-template-columns: repeat(${t}, 1fr);
  grid-template-rows: repeat(${a}, 1fr);
  gap: ${l}rem ${o}rem;
}`,[a,t,l,o]),u=()=>{navigator.clipboard.writeText(d)},h=()=>{j(d,"grid.css","text/css")},b=()=>{c(r.rows),i(r.cols),m(r.rowGap),x(r.colGap)};return e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl font-bold flex items-center",children:[e.jsx(y,{}),e.jsx("span",{className:"ml-3",children:"CSS Grid Visual Editor"})]}),e.jsx("p",{className:"text-text-secondary 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-surface border border-border p-6 rounded-lg overflow-y-auto",children:[e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsx("h3",{className:"text-xl font-bold",children:"Controls"}),e.jsx("button",{onClick:b,className:"text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md",children:"Reset"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsxs("label",{htmlFor:"rows",className:"block text-sm font-medium text-text-secondary",children:["Rows (",a,")"]}),e.jsx("input",{id:"rows",type:"range",min:"1",max:"12",value:a,onChange:s=>c(Number(s.target.value)),className:"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"})]}),e.jsxs("div",{children:[e.jsxs("label",{htmlFor:"cols",className:"block text-sm font-medium text-text-secondary",children:["Columns (",t,")"]}),e.jsx("input",{id:"cols",type:"range",min:"1",max:"12",value:t,onChange:s=>i(Number(s.target.value)),className:"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"})]}),e.jsxs("div",{children:[e.jsxs("label",{htmlFor:"rowGap",className:"block text-sm font-medium text-text-secondary",children:["Row Gap (",l,"rem)"]}),e.jsx("input",{id:"rowGap",type:"range",min:"0",max:"8",step:"0.25",value:l,onChange:s=>m(Number(s.target.value)),className:"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"})]}),e.jsxs("div",{children:[e.jsxs("label",{htmlFor:"colGap",className:"block text-sm font-medium text-text-secondary",children:["Column Gap (",o,"rem)"]}),e.jsx("input",{id:"colGap",type:"range",min:"0",max:"8",step:"0.25",value:o,onChange:s=>x(Number(s.target.value)),className:"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"})]})]}),e.jsxs("div",{className:"flex-grow mt-4 flex flex-col min-h-[150px]",children:[e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[e.jsx("label",{className:"text-sm font-medium text-text-secondary",children:"Generated CSS"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{onClick:u,className:"px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-xs",children:"Copy"}),e.jsxs("button",{onClick:h,className:"flex items-center gap-1 px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-xs",children:[e.jsx(f,{className:"w-4 h-4"})," Download"]})]})]}),e.jsx("div",{className:"relative flex-grow",children:e.jsx("pre",{className:"bg-background p-4 rounded-md text-primary text-sm overflow-auto h-full w-full absolute",children:d})})]})]}),e.jsx("div",{className:"lg:col-span-2 bg-background rounded-lg p-4 border-2 border-dashed border-border",children:e.jsx("div",{style:g,children:Array.from({length:a*t}).map((s,p)=>e.jsx("div",{className:"bg-primary/10 rounded-lg border-2 border-dashed border-primary/50 flex items-center justify-center text-primary",children:e.jsx("span",{className:"text-xs opacity-70",children:p+1})},p))})})]})]})};export{F as CssGridEditor};
//# sourceMappingURL=CssGridEditor-DgTOpvXn.js.map