admin08077/Githubgemini

1{"version":3,"file":"CssGridEditor-CZ2TFPsx.js","sources":["../../components/features/CssGridEditor.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { CodeBracketSquareIcon, ArrowDownTrayIcon } from '../icons.tsx';\nimport { downloadFile } from '../../services/index.ts';\n\nconst initialSettings = { rows: 3, cols: 4, rowGap: 1, colGap: 1 };\n\nexport const CssGridEditor: React.FC = () => {\n    const [rows, setRows] = useState(initialSettings.rows);\n    const [cols, setCols] = useState(initialSettings.cols);\n    const [rowGap, setRowGap] = useState(initialSettings.rowGap);\n    const [colGap, setColGap] = useState(initialSettings.colGap);\n\n    const gridStyle = {\n        display: 'grid',\n        gridTemplateColumns: `repeat(${cols}, 1fr)`,\n        gridTemplateRows: `repeat(${rows}, 1fr)`,\n        gap: `${rowGap}rem ${colGap}rem`,\n        height: '100%',\n        width: '100%'\n    };\n\n    const cssCode = useMemo(() => {\n        return `.grid-container {\n  display: grid;\n  grid-template-columns: repeat(${cols}, 1fr);\n  grid-template-rows: repeat(${rows}, 1fr);\n  gap: ${rowGap}rem ${colGap}rem;\n}`;\n    }, [rows, cols, rowGap, colGap]);\n    \n    const handleCopy = () => {\n        navigator.clipboard.writeText(cssCode);\n    };\n    \n    const handleDownload = () => {\n        downloadFile(cssCode, 'grid.css', 'text/css');\n    };\n\n    const handleReset = () => {\n        setRows(initialSettings.rows);\n        setCols(initialSettings.cols);\n        setRowGap(initialSettings.rowGap);\n        setColGap(initialSettings.colGap);\n    };\n\n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\">\n                <h1 className=\"text-3xl font-bold flex items-center\">\n                    <CodeBracketSquareIcon />\n                    <span className=\"ml-3\">CSS Grid Visual Editor</span>\n                </h1>\n                <p className=\"text-text-secondary mt-1\">Configure your grid layout and copy the generated CSS.</p>\n            </header>\n            <div className=\"flex-grow grid grid-cols-1 lg:grid-cols-3 gap-6 min-h-0\">\n                <div className=\"lg:col-span-1 flex flex-col gap-4 bg-surface border border-border p-6 rounded-lg overflow-y-auto\">\n                    <div className=\"flex justify-between items-center\">\n                        <h3 className=\"text-xl font-bold\">Controls</h3>\n                        <button onClick={handleReset} className=\"text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md\">Reset</button>\n                    </div>\n                    <div className=\"space-y-4\">\n                        <div>\n                            <label htmlFor=\"rows\" className=\"block text-sm font-medium text-text-secondary\">Rows ({rows})</label>\n                            <input id=\"rows\" type=\"range\" min=\"1\" max=\"12\" value={rows} onChange={e => setRows(Number(e.target.value))} className=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer\" />\n                        </div>\n                        <div>\n                            <label htmlFor=\"cols\" className=\"block text-sm font-medium text-text-secondary\">Columns ({cols})</label>\n                            <input id=\"cols\" type=\"range\" min=\"1\" max=\"12\" value={cols} onChange={e => setCols(Number(e.target.value))} className=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer\" />\n                        </div>\n                         <div>\n                            <label htmlFor=\"rowGap\" className=\"block text-sm font-medium text-text-secondary\">Row Gap ({rowGap}rem)</label>\n                            <input id=\"rowGap\" type=\"range\" min=\"0\" max=\"8\" step=\"0.25\" value={rowGap} onChange={e => setRowGap(Number(e.target.value))} className=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer\" />\n                        </div>\n                         <div>\n                            <label htmlFor=\"colGap\" className=\"block text-sm font-medium text-text-secondary\">Column Gap ({colGap}rem)</label>\n                            <input id=\"colGap\" type=\"range\" min=\"0\" max=\"8\" step=\"0.25\" value={colGap} onChange={e => setColGap(Number(e.target.value))} className=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer\" />\n                        </div>\n                    </div>\n                     <div className=\"flex-grow mt-4 flex flex-col min-h-[150px]\">\n                        <div className=\"flex justify-between items-center mb-2\">\n                            <label className=\"text-sm font-medium text-text-secondary\">Generated CSS</label>\n                            <div className=\"flex gap-2\">\n                                <button onClick={handleCopy} className=\"px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-xs\">Copy</button>\n                                <button onClick={handleDownload} className=\"flex items-center gap-1 px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-xs\"><ArrowDownTrayIcon className=\"w-4 h-4\"/> Download</button>\n                            </div>\n                        </div>\n                        <div className=\"relative flex-grow\">\n                            <pre className=\"bg-background p-4 rounded-md text-primary text-sm overflow-auto h-full w-full absolute\">{cssCode}</pre>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"lg:col-span-2 bg-background rounded-lg p-4 border-2 border-dashed border-border\">\n                    <div style={gridStyle}>\n                        {Array.from({ length: rows * cols }).map((_, i) => (\n                            <div key={i} className=\"bg-primary/10 rounded-lg border-2 border-dashed border-primary/50 flex items-center justify-center text-primary\">\n                                <span className=\"text-xs opacity-70\">{i + 1}</span>\n                            </div>\n                        ))}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"],"names":["initialSettings","CssGridEditor","rows","setRows","useState","cols","setCols","rowGap","setRowGap","colGap","setColGap","gridStyle","cssCode","useMemo","handleCopy","handleDownload","downloadFile","handleReset","jsxs","jsx","CodeBracketSquareIcon","e","ArrowDownTrayIcon","_","i"],"mappings":"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"}