admin08077/Githubgemini

1import{r as l,j as e}from"./react-CIdJ77ke.js";import{O as y,J as f}from"./index-CX7Qxd1D.js";import"./@google-CcUHq7Ay.js";import{d as j}from"./fileUtils-DLahR3l0.js";import"./accessibilityService-PX6aNbbc.js";import"./workspaceConnectorService-KhhKdOYD.js";import"./@braintree-DzxiOROe.js";import"./react-dom-R9L8nDNe.js";import"./scheduler-CoSDG3-6.js";import"./idb-Dob3nYDb.js";import"./marked-BrGMJkBT.js";import"./mermaid-KwKZWwy0.js";import"./dayjs-CeEF-NGT.js";import"./d3-transition-CiCB8KJE.js";import"./d3-timer-DdKHrDhs.js";import"./d3-dispatch-kxCwF96_.js";import"./d3-interpolate-CtIaNujU.js";import"./d3-color-amxIadob.js";import"./d3-selection-C52G7wmG.js";import"./d3-ease-DRPgKoYJ.js";import"./d3-zoom-BYoC3mS3.js";import"./dompurify-J5RlrwSC.js";import"./dagre-d3-es-CTpFWynZ.js";import"./lodash-es-Dt6r0yiR.js";import"./d3-shape-CX8xTzfR.js";import"./d3-path-CimkQT29.js";import"./d3-fetch-BOsq7VnW.js";import"./khroma-DUX6PT6k.js";import"./uuid-DhYbOkY1.js";import"./d3-scale-DRZz3QW5.js";import"./internmap-BkD7Hj8s.js";import"./d3-array-DGRYoJHh.js";import"./d3-format-CzD4bSOQ.js";import"./d3-time-format-CUNN4Ell.js";import"./d3-time-6cSPyVSY.js";import"./d3-axis-DSWTncID.js";import"./elkjs-oKFFZvz7.js";import"./cytoscape-DtBltrT8.js";import"./cytoscape-cose-bilkent-Cgr1thlj.js";import"./cose-base-CwCxnKwh.js";import"./layout-base-CMXQqlmj.js";import"./d3-sankey-DgqkLiUE.js";import"./d3-scale-chromatic-B-NsZVaP.js";import"./ts-dedent-DrFu-skq.js";import"./stylis-D5iaQeiq.js";import"./mdast-util-from-markdown-CLAsVoWb.js";import"./micromark-CTBPIv-_.js";import"./micromark-util-combine-extensions-Bka6Sc1c.js";import"./micromark-util-chunked-DrRIdSP-.js";import"./micromark-factory-space-x2vfxbz5.js";import"./micromark-util-character-Bcm1tP9o.js";import"./micromark-core-commonmark-AH8VCgT7.js";import"./micromark-util-classify-character-Cq7Fg3xE.js";import"./micromark-util-resolve-all-PQCKh0dx.js";import"./decode-named-character-reference-C3-224fz.js";import"./micromark-util-subtokenize-QwsxNXk2.js";import"./micromark-factory-destination-CypD_wgM.js";import"./micromark-factory-label-CRHH4ZHP.js";import"./micromark-factory-title-B7kCBvC9.js";import"./micromark-factory-whitespace-B322EA6O.js";import"./micromark-util-normalize-identifier-C9ANKk3v.js";import"./micromark-util-html-tag-name-DbKNfynz.js";import"./micromark-util-decode-numeric-character-reference-DRnCnno4.js";import"./micromark-util-decode-string-DJl8Y_PO.js";import"./unist-util-stringify-position-Ch_qCilz.js";import"./mdast-util-to-string-C_aolqmU.js";import"./jszip-CFFhfFtd.js";import"./octokit-B6bKu3NB.js";import"./@octokit-MBEWYTsi.js";import"./bottleneck-D_vuF9V7.js";import"./universal-user-agent-CLgqIJsR.js";import"./before-after-hook-y8XtM9xW.js";import"./fast-content-type-parse-3SwieiST.js";import"./axe-core-Cc5paZPx.js";const t={rows:3,cols:4,rowGap:1,colGap:1},Ve=()=>{const[o,p]=l.useState(t.rows),[s,n]=l.useState(t.cols),[a,d]=l.useState(t.rowGap),[i,c]=l.useState(t.colGap),g={display:"grid",gridTemplateColumns:`repeat(${s}, 1fr)`,gridTemplateRows:`repeat(${o}, 1fr)`,gap:`${a}rem ${i}rem`,height:"100%",width:"100%"},m=l.useMemo(()=>`.grid-container {2  display: grid;3  grid-template-columns: repeat(${s}, 1fr);4  grid-template-rows: repeat(${o}, 1fr);5  gap: ${a}rem ${i}rem;6}`,[o,s,a,i]),u=()=>{navigator.clipboard.writeText(m)},h=()=>{j(m,"grid.css","text/css")},b=()=>{p(t.rows),n(t.cols),d(t.rowGap),c(t.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 (",o,")"]}),e.jsx("input",{id:"rows",type:"range",min:"1",max:"12",value:o,onChange:r=>p(Number(r.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 (",s,")"]}),e.jsx("input",{id:"cols",type:"range",min:"1",max:"12",value:s,onChange:r=>n(Number(r.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 (",a,"rem)"]}),e.jsx("input",{id:"rowGap",type:"range",min:"0",max:"8",step:"0.25",value:a,onChange:r=>d(Number(r.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 (",i,"rem)"]}),e.jsx("input",{id:"colGap",type:"range",min:"0",max:"8",step:"0.25",value:i,onChange:r=>c(Number(r.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:m})})]})]}),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:o*s}).map((r,x)=>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:x+1})},x))})})]})]})};export{Ve as CssGridEditor};7//# sourceMappingURL=CssGridEditor-DZsv6dpm.js.map8