admin08077/Githubgemini
0
1{"version":3,"file":"ColorPaletteGenerator-D2lyyWod.js","sources":["../../components/features/ColorPaletteGenerator.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { HexColorPicker } from 'react-colorful';\nimport { generateColorPalette, downloadFile } from '../../services/index.ts';\nimport { SparklesIcon, ArrowDownTrayIcon } from '../icons.tsx';\nimport { LoadingSpinner } from '../shared/index.tsx';\n\ninterface PreviewColors {\n cardBg: string;\n pillBg: string;\n pillText: string;\n buttonBg: string;\n}\n\nconst PreviewCard: React.FC<{ palette: string[], colors: PreviewColors, setColors: React.Dispatch<React.SetStateAction<PreviewColors>> }> = ({ palette, colors, setColors }) => {\n \n const ColorSelector: React.FC<{ label: string, value: string, onChange: (val: string) => void }> = ({ label, value, onChange }) => (\n <div className=\"flex items-center justify-between text-sm\">\n <label className=\"text-text-primary\">{label}</label>\n <div className=\"flex items-center gap-2\">\n {palette.map(color => (\n <button \n key={color}\n onClick={() => onChange(color)}\n className={`w-5 h-5 rounded-full border border-gray-300 ${value === color ? 'ring-2 ring-primary ring-offset-1' : ''}`}\n style={{ backgroundColor: color }}\n title={color}\n />\n ))}\n </div>\n </div>\n );\n \n return (\n <div className=\"bg-surface p-4 rounded-lg border border-border w-full max-w-sm\">\n <h3 className=\"text-lg font-bold mb-4 text-text-primary\">Live Preview</h3>\n <div className=\"p-8 rounded-xl mb-4\" style={{ backgroundColor: colors.cardBg }}>\n <div className=\"px-4 py-1 rounded-full text-center text-sm inline-block\" style={{ backgroundColor: colors.pillBg, color: colors.pillText }}>\n New Feature\n </div>\n <div className=\"mt-8 text-center\">\n <button className=\"px-6 py-2 rounded-lg font-bold\" style={{ backgroundColor: colors.buttonBg, color: colors.cardBg }}>\n Get Started\n </button>\n </div>\n </div>\n <div className=\"space-y-3\">\n <ColorSelector label=\"Card Background\" value={colors.cardBg} onChange={val => setColors(c => ({...c, cardBg: val}))} />\n <ColorSelector label=\"Pill Background\" value={colors.pillBg} onChange={val => setColors(c => ({...c, pillBg: val}))} />\n <ColorSelector label=\"Pill Text\" value={colors.pillText} onChange={val => setColors(c => ({...c, pillText: val}))} />\n <ColorSelector label=\"Button Background\" value={colors.buttonBg} onChange={val => setColors(c => ({...c, buttonBg: val}))} />\n </div>\n </div>\n );\n};\n\nexport const ColorPaletteGenerator: React.FC = () => {\n const [baseColor, setBaseColor] = useState(\"#0047AB\");\n const [palette, setPalette] = useState<string[]>(['#F0F2F5', '#CCD3E8', '#99AADD', '#6688D1', '#3366CC', '#0047AB']);\n const [isLoading, setIsLoading] = useState<boolean>(false);\n const [error, setError] = useState<string>('');\n const [previewColors, setPreviewColors] = useState<PreviewColors>({\n cardBg: '#F0F2F5', pillBg: '#CCD3E8', pillText: '#0047AB', buttonBg: '#0047AB'\n });\n \n const handleGenerate = useCallback(async () => {\n setIsLoading(true);\n setError('');\n try {\n const result = await generateColorPalette(baseColor);\n setPalette(result.colors);\n setPreviewColors({\n cardBg: result.colors[0],\n pillBg: result.colors[2],\n pillText: result.colors[5],\n buttonBg: result.colors[5],\n })\n } catch (err) {\n const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';\n setError(`Failed to generate palette: ${errorMessage}`);\n } finally {\n setIsLoading(false);\n }\n }, [baseColor]);\n \n const downloadColors = () => {\n const cssContent = `:root {\\n${palette.map((c, i) => ` --color-palette-${i+1}: ${c};`).join('\\n')}\\n}`;\n downloadFile(cssContent, 'palette.css', 'text/css');\n };\n \n const downloadCard = () => {\n const htmlContent = `\n<div class=\"card\">\n <div class=\"pill\">New Feature</div>\n <button class=\"button\">Get Started</button>\n</div>\n `;\n const cssContent = `\n.card {\n background-color: ${previewColors.cardBg};\n padding: 2rem;\n border-radius: 1rem;\n text-align: center;\n}\n.pill {\n background-color: ${previewColors.pillBg};\n color: ${previewColors.pillText};\n display: inline-block;\n padding: 0.25rem 1rem;\n border-radius: 9999px;\n text-align: center;\n font-size: 0.875rem;\n}\n.button {\n margin-top: 2rem;\n background-color: ${previewColors.buttonBg};\n color: ${previewColors.cardBg};\n padding: 0.5rem 1.5rem;\n border-radius: 0.5rem;\n font-weight: bold;\n border: none;\n cursor: pointer;\n}\n `;\n const combined = `<!-- HTML -->\\n${htmlContent}\\n\\n<!-- CSS -->\\n<style>\\n${cssContent}\\n</style>`;\n downloadFile(combined, 'preview-card.html', 'text/html');\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 text-center\">\n <h1 className=\"text-3xl font-bold flex items-center justify-center\">\n <SparklesIcon />\n <span className=\"ml-3\">AI Color Palette Generator</span>\n </h1>\n <p className=\"text-text-secondary mt-1\">Pick a base color, let Gemini design a palette, and preview it on a UI card.</p>\n </header>\n <div className=\"flex-grow flex flex-col lg:flex-row items-center justify-center gap-8\">\n <div className=\"flex flex-col items-center gap-4\">\n <HexColorPicker color={baseColor} onChange={setBaseColor} className=\"!w-64 !h-64\"/>\n <div className=\"p-2 bg-surface rounded-md font-mono text-lg border border-border\" style={{color: baseColor}}>{baseColor}</div>\n <button onClick={handleGenerate} disabled={isLoading} className=\"btn-primary w-full flex items-center justify-center px-6 py-3\">\n {isLoading ? <LoadingSpinner /> : 'Generate Palette'}\n </button>\n {error && <p className=\"text-red-500 text-sm mt-2\">{error}</p>}\n </div>\n <div className=\"flex flex-col gap-2 w-full max-w-sm\">\n <label className=\"text-sm font-medium text-text-secondary mb-2\">Generated Palette:</label>\n {isLoading ? (\n <div className=\"flex items-center justify-center h-48\"><LoadingSpinner /></div>\n ) : (\n palette.map((color) => (\n <div key={color} className=\"group flex items-center justify-between p-4 rounded-md shadow-sm border border-border\" style={{ backgroundColor: color }}>\n <span className=\"font-mono font-bold text-black/70 mix-blend-overlay\">{color}</span>\n <button onClick={() => navigator.clipboard.writeText(color)} className=\"opacity-0 group-hover:opacity-100 transition-opacity bg-white/30 hover:bg-white/50 px-3 py-1 rounded text-xs text-black font-semibold backdrop-blur-sm\">Copy</button>\n </div>\n ))\n )}\n <div className=\"flex gap-2 mt-2\">\n <button onClick={downloadColors} className=\"flex-1 flex items-center justify-center gap-2 text-sm py-2 bg-gray-100 border border-border rounded-md hover:bg-gray-200\"><ArrowDownTrayIcon className=\"w-4 h-4\"/> Download Colors</button>\n <button onClick={downloadCard} className=\"flex-1 flex items-center justify-center gap-2 text-sm py-2 bg-gray-100 border border-border rounded-md hover:bg-gray-200\"><ArrowDownTrayIcon className=\"w-4 h-4\"/> Download Card</button>\n </div>\n </div>\n {!isLoading && <PreviewCard palette={palette} colors={previewColors} setColors={setPreviewColors} />}\n </div>\n </div>\n );\n};"],"names":["PreviewCard","palette","colors","setColors","ColorSelector","label","value","onChange","jsxs","jsx","color","val","c","ColorPaletteGenerator","baseColor","setBaseColor","useState","setPalette","isLoading","setIsLoading","error","setError","previewColors","setPreviewColors","handleGenerate","useCallback","result","generateColorPalette","err","errorMessage","downloadColors","cssContent","i","downloadFile","downloadCard","htmlContent","combined","SparklesIcon","HexColorPicker","LoadingSpinner","ArrowDownTrayIcon"],"mappings":"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"}