admin08077/Githubgemini
0
1{"version":3,"file":"ThemeDesigner-D2bdzfN0.js","sources":["../../components/shared/LoadingSpinner.tsx","../../components/features/ThemeDesigner.tsx"],"sourcesContent":["\nimport React from 'react';\n\nexport const LoadingSpinner: React.FC = () => (\n <div className=\"flex items-center justify-center space-x-1\" aria-label=\"Loading\">\n <div className=\"w-2 h-2 rounded-full bg-current animate-pulse\" style={{ animationDelay: '0s' }}></div>\n <div className=\"w-2 h-2 rounded-full bg-current animate-pulse\" style={{ animationDelay: '0.2s' }}></div>\n <div className=\"w-2 h-2 rounded-full bg-current animate-pulse\" style={{ animationDelay: '0.4s' }}></div>\n </div>\n);\n","import React, { useState, useCallback, useEffect } from 'react';\nimport { SparklesIcon, ArrowDownTrayIcon } from '../icons.tsx';\nimport { generateThemeFromDescription } from '../../services/geminiService.ts';\nimport type { ColorTheme } from '../../types.ts';\nimport { LoadingSpinner } from '../shared/LoadingSpinner.tsx';\nimport { HexColorPicker } from 'react-colorful';\nimport { downloadFile } from '../../services/fileUtils.ts';\n\nconst ColorInput: React.FC<{ label: string; color: string; onChange: (color: string) => void; }> = ({ label, color, onChange }) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <div className=\"relative\">\n <div onClick={() => setIsOpen(!isOpen)} className=\"flex items-center justify-between p-3 bg-background rounded-md cursor-pointer border-2 border-border hover:border-gray-300\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-6 h-6 rounded border border-border\" style={{ backgroundColor: color }} />\n <span className=\"text-sm font-medium text-text-primary\">{label}</span>\n </div>\n <span className=\"font-mono text-sm text-text-secondary\">{color}</span>\n </div>\n {isOpen && (\n <div className=\"absolute z-10 top-full mt-2 right-0\">\n <div className=\"fixed inset-0\" onClick={() => setIsOpen(false)} />\n <HexColorPicker color={color} onChange={onChange} />\n </div>\n )}\n </div>\n );\n};\n\nconst randomPrompts = [\n 'A serene forest at dawn',\n 'A retro 8-bit video game',\n 'A cyberpunk cityscape at night',\n 'A warm, cozy coffee shop',\n 'An arctic expedition with icy blues',\n 'A vibrant coral reef',\n];\n\nexport const ThemeDesigner: React.FC<{ initialPrompt?: string }> = ({ initialPrompt }) => {\n const [theme, setTheme] = useState<ColorTheme>({\n primary: '#0047AB', background: '#F5F7FA', surface: '#FFFFFF', textPrimary: '#111827', textSecondary: '#6B7280',\n });\n const [prompt, setPrompt] = useState(initialPrompt || 'A professional and clean corporate blue theme.');\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState('');\n\n const handleGenerate = useCallback(async (p: string) => {\n if (!p.trim()) { setError('Please enter a description.'); return; }\n setIsLoading(true); setError('');\n try {\n const newTheme = await generateThemeFromDescription(p);\n setTheme(newTheme);\n } catch (err) {\n setError(err instanceof Error ? err.message : \"An unknown error occurred.\");\n } finally {\n setIsLoading(false);\n }\n }, []);\n\n const handleRandom = () => {\n const randomPrompt = randomPrompts[Math.floor(Math.random() * randomPrompts.length)];\n setPrompt(randomPrompt);\n handleGenerate(randomPrompt);\n };\n\n const handleColorChange = (key: keyof ColorTheme, color: string) => {\n setTheme(prev => ({...prev, [key]: color}));\n };\n \n const getExportContent = (type: 'css' | 'tailwind') => {\n if (type === 'css') {\n return `:root {\\n` +\n ` --primary: ${theme.primary};\\n` +\n ` --background: ${theme.background};\\n` +\n ` --surface: ${theme.surface};\\n` +\n ` --text-primary: ${theme.textPrimary};\\n` +\n ` --text-secondary: ${theme.textSecondary};\\n` +\n `}`;\n }\n return `// tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n primary: '${theme.primary}',\n background: '${theme.background}',\n surface: '${theme.surface}',\n 'text-primary': '${theme.textPrimary}',\n 'text-secondary': '${theme.textSecondary}',\n },\n },\n },\n};`;\n };\n\n useEffect(() => {\n if (initialPrompt) handleGenerate(initialPrompt);\n }, [initialPrompt, handleGenerate]);\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\"><SparklesIcon /><span className=\"ml-3\">AI Theme Designer</span></h1>\n <p className=\"text-text-secondary mt-1\">Describe, generate, fine-tune, and export a color theme for your application.</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 <h3 className=\"text-xl font-bold\">Describe your theme</h3>\n <textarea value={prompt} onChange={e => setPrompt(e.target.value)} className=\"p-2 bg-background border border-border rounded-md resize-none text-sm h-24\" placeholder=\"e.g., A light, airy theme for a blog\" />\n <div className=\"flex gap-2\">\n <button onClick={() => handleGenerate(prompt)} disabled={isLoading} className=\"btn-primary w-full flex items-center justify-center gap-2 px-4 py-2\">\n {isLoading ? <LoadingSpinner /> : 'Generate Theme'}\n </button>\n <button onClick={handleRandom} disabled={isLoading} className=\"px-4 py-2 bg-gray-100 border border-border rounded-md hover:bg-gray-200\" title=\"Random Theme\">🎲</button>\n </div>\n {error && <p className=\"text-red-500 text-xs text-center\">{error}</p>}\n\n <div className=\"mt-4 border-t border-border pt-4 space-y-2 flex-grow overflow-y-auto pr-2\">\n <h3 className=\"text-lg font-bold\">Fine-Tune Palette</h3>\n <ColorInput label=\"Primary\" color={theme.primary} onChange={c => handleColorChange('primary', c)} />\n <ColorInput label=\"Background\" color={theme.background} onChange={c => handleColorChange('background', c)} />\n <ColorInput label=\"Surface\" color={theme.surface} onChange={c => handleColorChange('surface', c)} />\n <ColorInput label=\"Text Primary\" color={theme.textPrimary} onChange={c => handleColorChange('textPrimary', c)} />\n <ColorInput label=\"Text Secondary\" color={theme.textSecondary} onChange={c => handleColorChange('textSecondary', c)} />\n </div>\n <div className=\"flex-shrink-0 pt-4 border-t border-border flex flex-col gap-2\">\n <button onClick={() => downloadFile(getExportContent('css'), 'theme.css', 'text/css')} className=\"flex-1 text-sm py-2 bg-gray-100 border border-border rounded-md flex items-center justify-center gap-2 hover:bg-gray-200\">\n <ArrowDownTrayIcon className=\"w-4 h-4\"/> Download CSS\n </button>\n <button onClick={() => downloadFile(getExportContent('tailwind'), 'tailwind.config.js', 'application/javascript')} className=\"flex-1 text-sm py-2 bg-gray-100 border border-border rounded-md flex items-center justify-center gap-2 hover:bg-gray-200\">\n <ArrowDownTrayIcon className=\"w-4 h-4\"/> Download Tailwind Config\n </button>\n </div>\n </div>\n <div className=\"lg:col-span-2 rounded-lg p-8 overflow-y-auto border border-border\" style={{ backgroundColor: theme.background, color: theme.textPrimary }}>\n <h3 className=\"text-2xl font-bold mb-6\" style={{ color: theme.textPrimary }}>Live Preview</h3>\n <div className=\"p-6 rounded-lg grid grid-cols-1 md:grid-cols-2 gap-6\" style={{ backgroundColor: theme.surface }}>\n <div className=\"space-y-4\">\n <h4 className=\"text-lg font-bold\">Sample Card</h4>\n <p className=\"text-sm\" style={{color: theme.textSecondary}}>This is a sample card to demonstrate the theme colors. It contains a primary button and some secondary text.</p>\n <button className=\"px-4 py-2 rounded-md font-bold transition-colors\" style={{ backgroundColor: theme.primary, color: theme.textSecondary.includes('#F') ? '#000' : '#FFF' }}>Primary Button</button>\n </div>\n <div className=\"space-y-4\">\n <input type=\"text\" placeholder=\"Text input\" className=\"w-full px-3 py-2 rounded-md border\" style={{backgroundColor: theme.background, borderColor: theme.primary, color: theme.textPrimary}} />\n <div className=\"p-3 border rounded\" style={{borderColor: theme.primary, color: theme.textSecondary}}>\n <p>A bordered container.</p>\n </div>\n </div>\n </div>\n <div className=\"mt-6\">\n <h4 className=\"text-lg font-bold mb-2\">Typography</h4>\n <h1>Heading 1</h1>\n <h2>Heading 2</h2>\n <p style={{color: theme.textPrimary}}>This is a paragraph of primary text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n <p style={{color: theme.textSecondary}}>This is secondary text, for descriptions or less important information.</p>\n </div>\n </div>\n </div>\n </div>\n );\n};"],"names":["LoadingSpinner","jsxs","jsx","ColorInput","label","color","onChange","isOpen","setIsOpen","useState","HexColorPicker","randomPrompts","ThemeDesigner","initialPrompt","theme","setTheme","prompt","setPrompt","isLoading","setIsLoading","error","setError","handleGenerate","useCallback","p","newTheme","generateThemeFromDescription","err","handleRandom","randomPrompt","handleColorChange","key","prev","getExportContent","type","useEffect","SparklesIcon","e","c","downloadFile","ArrowDownTrayIcon"],"mappings":"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"}