CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
ThemeDesigner-D2bdzfN0.js22 linesDownload Raw Back to assets
1import{j as e,r as a}from"./react-DKy9e2uO.js";import{S as v,A as y}from"./index-Ykf-MVva.js";import{b as w}from"./geminiService-D2PWX7SA.js";import{Z as k}from"./react-colorful-4Kqy2sC7.js";import{d as g}from"./fileUtils-Bw7t6Hrv.js";import"./bottleneck-Cpj98o6Y.js";import"./react-dom-CpxHE_eW.js";import"./scheduler-DYLXRpC5.js";import"./idb-Dob3nYDb.js";import"./@google-D80DdW2m.js";import"./marked-CesSW9Du.js";import"./jszip-s56H2EZ-.js";const C=()=>e.jsxs("div",{className:"flex items-center justify-center space-x-1","aria-label":"Loading",children:[e.jsx("div",{className:"w-2 h-2 rounded-full bg-current animate-pulse",style:{animationDelay:"0s"}}),e.jsx("div",{className:"w-2 h-2 rounded-full bg-current animate-pulse",style:{animationDelay:"0.2s"}}),e.jsx("div",{className:"w-2 h-2 rounded-full bg-current animate-pulse",style:{animationDelay:"0.4s"}})]}),d=({label:t,color:r,onChange:i})=>{const[n,l]=a.useState(!1);return e.jsxs("div",{className:"relative",children:[e.jsxs("div",{onClick:()=>l(!n),className:"flex items-center justify-between p-3 bg-background rounded-md cursor-pointer border-2 border-border hover:border-gray-300",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-6 h-6 rounded border border-border",style:{backgroundColor:r}}),e.jsx("span",{className:"text-sm font-medium text-text-primary",children:t})]}),e.jsx("span",{className:"font-mono text-sm text-text-secondary",children:r})]}),n&&e.jsxs("div",{className:"absolute z-10 top-full mt-2 right-0",children:[e.jsx("div",{className:"fixed inset-0",onClick:()=>l(!1)}),e.jsx(k,{color:r,onChange:i})]})]})},f=["A serene forest at dawn","A retro 8-bit video game","A cyberpunk cityscape at night","A warm, cozy coffee shop","An arctic expedition with icy blues","A vibrant coral reef"],R=({initialPrompt:t})=>{const[r,i]=a.useState({primary:"#0047AB",background:"#F5F7FA",surface:"#FFFFFF",textPrimary:"#111827",textSecondary:"#6B7280"}),[n,l]=a.useState(t||"A professional and clean corporate blue theme."),[x,h]=a.useState(!1),[u,p]=a.useState(""),m=a.useCallback(async s=>{if(!s.trim()){p("Please enter a description.");return}h(!0),p("");try{const o=await w(s);i(o)}catch(o){p(o instanceof Error?o.message:"An unknown error occurred.")}finally{h(!1)}},[]),j=()=>{const s=f[Math.floor(Math.random()*f.length)];l(s),m(s)},c=(s,o)=>{i(N=>({...N,[s]:o}))},b=s=>s==="css"?`:root {2  --primary: ${r.primary};3  --background: ${r.background};4  --surface: ${r.surface};5  --text-primary: ${r.textPrimary};6  --text-secondary: ${r.textSecondary};7}`:`// tailwind.config.js8module.exports = {9  theme: {10    extend: {11      colors: {12        primary: '${r.primary}',13        background: '${r.background}',14        surface: '${r.surface}',15        'text-primary': '${r.textPrimary}',16        'text-secondary': '${r.textSecondary}',17      },18    },19  },20};`;return a.useEffect(()=>{t&&m(t)},[t,m]),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(v,{}),e.jsx("span",{className:"ml-3",children:"AI Theme Designer"})]}),e.jsx("p",{className:"text-text-secondary mt-1",children:"Describe, generate, fine-tune, and export a color theme for your application."})]}),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.jsx("h3",{className:"text-xl font-bold",children:"Describe your theme"}),e.jsx("textarea",{value:n,onChange:s=>l(s.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"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{onClick:()=>m(n),disabled:x,className:"btn-primary w-full flex items-center justify-center gap-2 px-4 py-2",children:x?e.jsx(C,{}):"Generate Theme"}),e.jsx("button",{onClick:j,disabled:x,className:"px-4 py-2 bg-gray-100 border border-border rounded-md hover:bg-gray-200",title:"Random Theme",children:"🎲"})]}),u&&e.jsx("p",{className:"text-red-500 text-xs text-center",children:u}),e.jsxs("div",{className:"mt-4 border-t border-border pt-4 space-y-2 flex-grow overflow-y-auto pr-2",children:[e.jsx("h3",{className:"text-lg font-bold",children:"Fine-Tune Palette"}),e.jsx(d,{label:"Primary",color:r.primary,onChange:s=>c("primary",s)}),e.jsx(d,{label:"Background",color:r.background,onChange:s=>c("background",s)}),e.jsx(d,{label:"Surface",color:r.surface,onChange:s=>c("surface",s)}),e.jsx(d,{label:"Text Primary",color:r.textPrimary,onChange:s=>c("textPrimary",s)}),e.jsx(d,{label:"Text Secondary",color:r.textSecondary,onChange:s=>c("textSecondary",s)})]}),e.jsxs("div",{className:"flex-shrink-0 pt-4 border-t border-border flex flex-col gap-2",children:[e.jsxs("button",{onClick:()=>g(b("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",children:[e.jsx(y,{className:"w-4 h-4"})," Download CSS"]}),e.jsxs("button",{onClick:()=>g(b("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",children:[e.jsx(y,{className:"w-4 h-4"})," Download Tailwind Config"]})]})]}),e.jsxs("div",{className:"lg:col-span-2 rounded-lg p-8 overflow-y-auto border border-border",style:{backgroundColor:r.background,color:r.textPrimary},children:[e.jsx("h3",{className:"text-2xl font-bold mb-6",style:{color:r.textPrimary},children:"Live Preview"}),e.jsxs("div",{className:"p-6 rounded-lg grid grid-cols-1 md:grid-cols-2 gap-6",style:{backgroundColor:r.surface},children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx("h4",{className:"text-lg font-bold",children:"Sample Card"}),e.jsx("p",{className:"text-sm",style:{color:r.textSecondary},children:"This is a sample card to demonstrate the theme colors. It contains a primary button and some secondary text."}),e.jsx("button",{className:"px-4 py-2 rounded-md font-bold transition-colors",style:{backgroundColor:r.primary,color:r.textSecondary.includes("#F")?"#000":"#FFF"},children:"Primary Button"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx("input",{type:"text",placeholder:"Text input",className:"w-full px-3 py-2 rounded-md border",style:{backgroundColor:r.background,borderColor:r.primary,color:r.textPrimary}}),e.jsx("div",{className:"p-3 border rounded",style:{borderColor:r.primary,color:r.textSecondary},children:e.jsx("p",{children:"A bordered container."})})]})]}),e.jsxs("div",{className:"mt-6",children:[e.jsx("h4",{className:"text-lg font-bold mb-2",children:"Typography"}),e.jsx("h1",{children:"Heading 1"}),e.jsx("h2",{children:"Heading 2"}),e.jsx("p",{style:{color:r.textPrimary},children:"This is a paragraph of primary text. Lorem ipsum dolor sit amet, consectetur adipiscing elit."}),e.jsx("p",{style:{color:r.textSecondary},children:"This is secondary text, for descriptions or less important information."})]})]})]})]})};export{R as ThemeDesigner};21//# sourceMappingURL=ThemeDesigner-D2bdzfN0.js.map22