├── .env
├── .eslintrc.json
├── .gitignore
├── .vscode
    └── settings.json
├── README.md
├── app
    ├── globals.css
    ├── layout.tsx
    └── page.tsx
├── components
    └── ui
    │   ├── alert.tsx
    │   ├── avatar.tsx
    │   ├── badge.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── checkbox.tsx
    │   ├── colorPicker.tsx
    │   ├── editable-text-field.tsx
    │   ├── input.tsx
    │   ├── label.tsx
    │   ├── progress.tsx
    │   ├── select.tsx
    │   ├── slider.tsx
    │   ├── switch.tsx
    │   └── tabs.tsx
├── lib
    ├── colors.ts
    ├── useClickOutside.ts
    └── utils.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── next.svg
    └── vercel.svg
├── tailwind.config.js
└── tsconfig.json


/.env:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_APP_URL=http://localhost:3000


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 
37 | .vercel
38 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "typescript.tsdk": "..\\node_modules\\.pnpm\\typescript@5.0.4\\node_modules\\typescript\\lib",
3 |   "typescript.enablePromptUseWorkspaceTsdk": true
4 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | work in progress 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 | 
 7 |   :root {
 8 |     --background: 0 0% 100%;
 9 |     --foreground: 222.2 47.4% 11.2%;
10 |  
11 |     --muted: 210 40% 96.1%;
12 |     --muted-foreground: 215.4 16.3% 46.9%;
13 |  
14 |     --popover: 0 0% 100%;
15 |     --popover-foreground: 222.2 47.4% 11.2%;
16 |  
17 |     --card: 0 0% 100%;
18 |     --card-foreground: 222.2 47.4% 11.2%;
19 |  
20 |     --border: 214.3 31.8% 91.4%;
21 |     --input: 214.3 31.8% 91.4%;
22 |  
23 |     --primary: 222.2 47.4% 11.2%;
24 |     --primary-foreground: 210 40% 98%;
25 |  
26 |     --secondary: 210 40% 96.1%;
27 |     --secondary-foreground: 222.2 47.4% 11.2%;
28 |  
29 |     --accent: 210 40% 96.1%;
30 |     --accent-foreground: 222.2 47.4% 11.2%;
31 |  
32 |     --destructive: 0 100% 50%;
33 |     --destructive-foreground: 210 40% 98%;
34 |  
35 |     --ring: 215 20.2% 65.1%;
36 |  
37 |     --radius: 0.5rem;
38 |   }
39 |   
40 |   .dark {
41 |     --background: 224 71% 4%;
42 |     --foreground: 213 31% 91%;
43 | 
44 |     --muted: 223 47% 11%;
45 |     --muted-foreground: 215.4 16.3% 56.9%;
46 | 
47 |     --popover: 224 71% 4%;
48 |     --popover-foreground: 215 20.2% 65.1%;
49 | 
50 |     --card: 0 0% 100%;
51 |     --card-foreground: 222.2 47.4% 11.2%;
52 | 
53 |     --border: 216 34% 17%;
54 |     --input: 216 34% 17%;
55 | 
56 |     --primary: 210 40% 98%;
57 |     --primary-foreground: 222.2 47.4% 1.2%;
58 | 
59 |     --secondary: 222.2 47.4% 11.2%;
60 |     --secondary-foreground: 210 40% 98%;
61 | 
62 |     --accent: 216 34% 17%;
63 |     --accent-foreground: 210 40% 98%;
64 | 
65 |     --destructive: 0 63% 31%;
66 |     --destructive-foreground: 210 40% 98%;
67 | 
68 |     --ring: 216 34% 17%;
69 | 
70 |     --radius: 0.5rem;
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './globals.css'
 2 | import { Inter } from 'next/font/google'
 3 | 
 4 | const inter = Inter({ subsets: ['latin'] })
 5 | 
 6 | export const metadata = {
 7 |   title: 'Create Next App',
 8 |   description: 'Generated by create next app',
 9 | }
10 | 
11 | export default function RootLayout({
12 |   children,
13 | }: {
14 |   children: React.ReactNode
15 | }) {
16 |   return (
17 |     <html lang="en">
18 |       <body className={`${inter.className} bg-gradient-to-r from-indigo-200 via-red-200 to-yellow-100`}>{children}</body>
19 |     </html>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { Button } from '@/components/ui/button'
  4 | import { Input } from '@/components/ui/input'
  5 | import { useState } from 'react'
  6 | import { generatePalette, hexToHSL } from '@/lib/colors'
  7 | import { CopyBlock, dracula } from "react-code-blocks";
  8 | import { Progress } from '@/components/ui/progress'
  9 | import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
 10 | import { Switch } from '@/components/ui/switch'
 11 | import { Badge } from '@/components/ui/badge'
 12 | import { Slider } from '@/components/ui/slider'
 13 | import { ColorPicker } from '@/components/ui/colorPicker'
 14 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 15 | import { Label } from "@/components/ui/label"
 16 | import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
 17 | import { AlertCircle } from 'lucide-react'
 18 | import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
 19 | import { Configuration, OpenAIApi } from "openai"
 20 | import toast, { Toaster } from 'react-hot-toast'
 21 | 
 22 | let baseCSS = `
 23 | :root {
 24 |   --background: 0 0% 100%;
 25 |   --foreground: 222.2 47.4% 11.2%;
 26 | 
 27 |   --muted: 210 40% 96.1%;
 28 |   --muted-foreground: 215.4 16.3% 46.9%;
 29 | 
 30 |   --popover: 0 0% 100%;
 31 |   --popover-foreground: 222.2 47.4% 11.2%;
 32 | 
 33 |   --card: 0 0% 100%;
 34 |   --card-foreground: 222.2 47.4% 11.2%;
 35 | 
 36 |   --border: 214.3 31.8% 91.4%;
 37 |   --input: 214.3 31.8% 91.4%;
 38 | 
 39 |   --primary: 222.2 47.4% 11.2%;
 40 |   --primary-foreground: 210 40% 98%;
 41 | 
 42 |   --secondary: 210 40% 96.1%;
 43 |   --secondary-foreground: 222.2 47.4% 11.2%;
 44 | 
 45 |   --accent: 210 40% 96.1%;
 46 |   --accent-foreground: 222.2 47.4% 11.2%;
 47 | 
 48 |   --destructive: 0 100% 50%;
 49 |   --destructive-foreground: 210 40% 98%;
 50 | 
 51 |   --ring: 215 20.2% 65.1%;
 52 | 
 53 |   --radius: 0.5rem;
 54 | }
 55 | 
 56 | `
 57 | 
 58 | export default function Home() {
 59 |   const [currentPrimaryColor, setCurrentPrimaryColor] = useState('#0f172a')
 60 |   const [currentSecondaryColor, setCurrentSecondaryColor] = useState('#f1f5f9')
 61 |   const [currentForegroundColor, setCurrentForegroundColor] = useState('#0f172a')
 62 |   const [currentBackgroundColor, setCurrentBackgroundColor] = useState('#ffffff')
 63 |   const [currentDestructiveColor, setCurrentDestructiveColor] = useState('#ff0000')
 64 |   const [currentAccentColor, setCurrentAccentColor] = useState('#532355')
 65 |   const [currentMutedColor, setCurrentMutedColor] = useState('#f1f5f9')
 66 |   const [currentOpenApiKey, setCurrentOpenApiKey] = useState('')
 67 |   const [currentOpenApiModel, setCurrentOpenApiModel] = useState('gpt-3.5-turbo')
 68 |   const [currentTheme, setCurrentTheme] = useState('light')
 69 |   const [currentCSS, setCurrentCSS] = useState(baseCSS)
 70 | 
 71 |   return (
 72 |     <>
 73 |       <Toaster />
 74 | 
 75 |       <main className="bg-gradient-to-r from-indigo-200 via-red-200 to-yellow-100 flex h-screen flex-col">
 76 |         <h1 className='text-5xl tracking-widest text-center mt-12 animate-text-shimmer bg-clip-text text-transparent bg-[linear-gradient(110deg,#2a2726,45%,#a2f09b,55%,#e2e8f0)] bg-[length:250%_100%]'>Generate your theme</h1>
 77 | 
 78 |         <div className='flex w-full mt-32 container flex-col max-w-lg'>
 79 |           <Tabs defaultValue="manually">
 80 |             <TabsList>
 81 |               <TabsTrigger value="manually">Manually</TabsTrigger>
 82 |               <TabsTrigger value="chatgpt">ChatGPT</TabsTrigger>
 83 |             </TabsList>
 84 |             <TabsContent className='space-y-1 flex-col' value="manually">
 85 |               <ColorPicker text='Primary' color={currentPrimaryColor} onChange={setCurrentPrimaryColor} />
 86 |               <ColorPicker text='Foreground' color={currentForegroundColor} onChange={setCurrentForegroundColor} />
 87 |               <ColorPicker text='Secondary' color={currentSecondaryColor} onChange={setCurrentSecondaryColor} />
 88 |               <ColorPicker text='Background' color={currentBackgroundColor} onChange={setCurrentBackgroundColor} />
 89 |               <ColorPicker text='Destructive' color={currentDestructiveColor} onChange={setCurrentDestructiveColor} />
 90 |               <ColorPicker text='Accent' color={currentAccentColor} onChange={setCurrentAccentColor} />
 91 |               <ColorPicker text='Muted' color={currentMutedColor} onChange={setCurrentMutedColor} />
 92 |               <Button
 93 |                 className='w-full mt-2 border-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500'
 94 |                 onClick={() => {
 95 |                   const primaryPalette = generatePalette(currentPrimaryColor)
 96 |                   const mutedPalette = generatePalette(currentMutedColor)
 97 |                   const secondaryPalette = generatePalette(currentSecondaryColor)
 98 |                   const accentPalette = generatePalette(currentAccentColor)
 99 |                   const destructivePalette = generatePalette(currentAccentColor)
100 | 
101 |                   setCurrentCSS(baseCSS)
102 |                   let replaced = baseCSS.replace(/(?<=--primary: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(currentPrimaryColor)};`)
103 |                     .replace(/(?<=--primary-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(primaryPalette.colors[50])};`)
104 |                     .replace(/(?<=--destructive: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(currentDestructiveColor)};`)
105 |                     .replace(/(?<=--destructive-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(destructivePalette.colors[50])};`)
106 |                     .replace(/(?<=--secondary: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(currentSecondaryColor)};`)
107 |                     .replace(/(?<=--secondary-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(secondaryPalette.colors[50])};`)
108 |                     .replace(/(?<=--foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(currentForegroundColor)};`)
109 |                     .replace(/(?<=--background: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(currentBackgroundColor)};`)
110 |                     .replace(/(?<=--muted: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(currentMutedColor)};`)
111 |                     .replace(/(?<=--muted-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(mutedPalette.colors[900])};`)
112 |                     .replace(/(?<=--accent: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(currentAccentColor)};`)
113 |                     .replace(/(?<=--accent-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(accentPalette.colors[50])};`)
114 | 
115 |                   document.documentElement.style.setProperty('--foreground', hexToHSL(currentForegroundColor));
116 |                   document.documentElement.style.setProperty('--destructive', hexToHSL(currentDestructiveColor));
117 |                   document.documentElement.style.setProperty('--destructive-foreground', hexToHSL(destructivePalette.colors[50]));
118 |                   document.documentElement.style.setProperty('--primary', hexToHSL(currentPrimaryColor));
119 |                   document.documentElement.style.setProperty('--primary-foreground', hexToHSL(primaryPalette.colors[50]));
120 |                   document.documentElement.style.setProperty('--secondary', hexToHSL(currentSecondaryColor));
121 |                   document.documentElement.style.setProperty('--secondary-foreground', hexToHSL(secondaryPalette.colors[50]));
122 |                   document.documentElement.style.setProperty('--background', hexToHSL(currentBackgroundColor));
123 |                   document.documentElement.style.setProperty('--muted', hexToHSL(currentMutedColor));
124 |                   document.documentElement.style.setProperty('--muted-foreground', hexToHSL(mutedPalette.colors[900]));
125 |                   document.documentElement.style.setProperty('--accent', hexToHSL(currentAccentColor));
126 |                   document.documentElement.style.setProperty('--accent-foreground', hexToHSL(accentPalette.colors[50]));
127 |                   setCurrentCSS(replaced)
128 |                 }}
129 |               >Generate</Button>
130 |             </TabsContent>
131 |             <TabsContent className='space-y-1 flex-col' value="chatgpt">
132 |               <Label>ChatGPT Model</Label>
133 |               <Select value={currentOpenApiModel} onValueChange={(e) => setCurrentOpenApiModel(e)}>
134 |                 <SelectTrigger>
135 |                   <SelectValue placeholder="Model" />
136 |                 </SelectTrigger>
137 |                 <SelectContent>
138 |                   <SelectGroup>
139 |                     <SelectItem value="gpt-3.5-turbo">🤖 GPT 3.5 turbo</SelectItem>
140 |                     <SelectItem value="gpt-4">🤖 GPT 4</SelectItem>
141 |                   </SelectGroup>
142 |                 </SelectContent>
143 |               </Select>
144 | 
145 |               <Label>OpenAPI Key</Label>
146 |               <Input type='password' value={currentOpenApiKey} onChange={(e) => setCurrentOpenApiKey(e.target.value)} />
147 | 
148 |               <Label>Theme</Label>
149 |               <Select value={currentTheme} onValueChange={(e) => setCurrentTheme(e)}>
150 |                 <SelectTrigger>
151 |                   <SelectValue placeholder="Theme" />
152 |                 </SelectTrigger>
153 |                 <SelectContent>
154 |                   <SelectGroup>
155 |                     <SelectItem value="light">🎨 Light</SelectItem>
156 |                     <SelectItem value="dark">🎨 Dark</SelectItem>
157 |                   </SelectGroup>
158 |                 </SelectContent>
159 |               </Select>
160 |               <ColorPicker text='Primary' color={currentPrimaryColor} onChange={setCurrentPrimaryColor} />
161 |               <ColorPicker text='Foreground' color={currentForegroundColor} onChange={setCurrentForegroundColor} />
162 |               <ColorPicker text='Secondary' color={currentSecondaryColor} onChange={setCurrentSecondaryColor} />
163 |               <ColorPicker text='Background' color={currentBackgroundColor} onChange={setCurrentBackgroundColor} />
164 |               <ColorPicker text='Destructive' color={currentDestructiveColor} onChange={setCurrentDestructiveColor} />
165 |               <ColorPicker text='Accent' color={currentAccentColor} onChange={setCurrentAccentColor} />
166 |               <ColorPicker text='Muted' color={currentMutedColor} onChange={setCurrentMutedColor} />
167 |               <Button
168 |                 className='w-full mt-2 border-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500'
169 |                 onClick={async () => {
170 | 
171 |                   const configuration = new Configuration({
172 |                     apiKey: currentOpenApiKey,
173 |                   });
174 | 
175 |                   const openai = new OpenAIApi(configuration);
176 | 
177 |                   try {
178 |                     const completion = await toast.promise(
179 |                       openai.createChatCompletion({
180 |                         model: currentOpenApiModel,
181 |                         messages: [
182 |                           {
183 |                             "role": "user",
184 |                             "content": `You will generate a beautiful relaxing color palette ${currentTheme === 'light' ? 'with a light background' : 'with a dark background'} for me and return it as json. Do not return anything else. ONLY the json. Colors need to be in hex format like --muted: #ffffff. Pick colors that you think that match beautifully with each other.Here are the possible values background, foreground, secondary, accent, muted, primary, destructive`
185 |                           }
186 |                         ]
187 |                       }),
188 |                       {
189 |                         loading: "Generating theme...",
190 |                         success: "Successfully generated theme! 🚀",
191 |                         error: "There was an error",
192 |                       },
193 |                       {
194 |                         success: {
195 |                           duration: 1000,
196 |                         },
197 |                       }
198 |                     )
199 | 
200 |                     if (!completion || completion.data.choices.length == 0) {
201 |                       toast.error('There was an error')
202 |                       return
203 |                     }
204 | 
205 | 
206 |                     const parsed = JSON.parse(completion.data!.choices[0]?.message!.content)
207 | 
208 |                     setCurrentBackgroundColor(parsed.background)
209 |                     setCurrentMutedColor(parsed.muted)
210 |                     setCurrentForegroundColor(parsed.foreground)
211 |                     setCurrentDestructiveColor(parsed.destructive)
212 |                     setCurrentAccentColor(parsed.accent)
213 |                     setCurrentPrimaryColor(parsed.primary)
214 |                     setCurrentSecondaryColor(parsed.secondary)
215 | 
216 |                     const primaryPalette = generatePalette(parsed.primary)
217 |                     const mutedPalette = generatePalette(parsed.muted)
218 |                     const secondaryPalette = generatePalette(parsed.secondary)
219 |                     const accentPalette = generatePalette(parsed.accent)
220 |                     const destructivePalette = generatePalette(parsed.destructive)
221 | 
222 |                     setCurrentCSS(baseCSS)
223 |                     let replaced = baseCSS.replace(/(?<=--primary: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(parsed.primary)};`)
224 |                       .replace(/(?<=--primary-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(primaryPalette.colors[50])};`)
225 |                       .replace(/(?<=--destructive: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(parsed.destructive)};`)
226 |                       .replace(/(?<=--destructive-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(destructivePalette.colors[50])};`)
227 |                       .replace(/(?<=--secondary: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(parsed.secondary)};`)
228 |                       .replace(/(?<=--secondary-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(secondaryPalette.colors[50])};`)
229 |                       .replace(/(?<=--foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(parsed.foreground)};`)
230 |                       .replace(/(?<=--background: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(parsed.background)};`)
231 |                       .replace(/(?<=--muted: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(parsed.muted)};`)
232 |                       .replace(/(?<=--muted-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(mutedPalette.colors[900])};`)
233 |                       .replace(/(?<=--accent: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(parsed.accent)};`)
234 |                       .replace(/(?<=--accent-foreground: )\d+(\.\d+)?\s\d+(\.\d+)?%\s\d+(\.\d+)?%;?/, `${hexToHSL(accentPalette.colors[50])};`)
235 | 
236 |                     document.documentElement.style.setProperty('--foreground', hexToHSL(parsed.foreground));
237 |                     document.documentElement.style.setProperty('--destructive', hexToHSL(parsed.destructive));
238 |                     document.documentElement.style.setProperty('--destructive-foreground', hexToHSL(destructivePalette.colors[50]));
239 |                     document.documentElement.style.setProperty('--primary', hexToHSL(parsed.primary));
240 |                     document.documentElement.style.setProperty('--primary-foreground', hexToHSL(primaryPalette.colors[50]));
241 |                     document.documentElement.style.setProperty('--secondary', hexToHSL(parsed.secondary));
242 |                     document.documentElement.style.setProperty('--secondary-foreground', hexToHSL(secondaryPalette.colors[50]));
243 |                     document.documentElement.style.setProperty('--background', hexToHSL(parsed.background));
244 |                     document.documentElement.style.setProperty('--muted', hexToHSL(parsed.muted));
245 |                     document.documentElement.style.setProperty('--muted-foreground', hexToHSL(mutedPalette.colors[900]));
246 |                     document.documentElement.style.setProperty('--accent', hexToHSL(parsed.accent));
247 |                     document.documentElement.style.setProperty('--accent-foreground', hexToHSL(accentPalette.colors[50]));
248 |                     setCurrentCSS(replaced)
249 |                   }
250 |                   catch (error) {
251 |                   }
252 |                 }}
253 |               >Generate</Button>
254 |             </TabsContent>
255 |             <TabsContent value="password">Change your password here.</TabsContent>
256 |           </Tabs>
257 | 
258 | 
259 |         </div>
260 | 
261 |         <div className='max-2xl container'>
262 |           <div className='mt-20 text-center'>
263 |             <span>Preview</span>
264 | 
265 |             <div className='rounded-xl bg-background p-10 border-2'>
266 |               <div className="grid grid-cols-4 gap-4">
267 |                 <Card>
268 |                   <CardHeader>
269 |                     <CardTitle>Notifications</CardTitle>
270 |                     <CardDescription>You have 3 unread messages.</CardDescription>
271 |                   </CardHeader>
272 |                   <CardContent className="grid gap-4">
273 |                     <div className=" flex items-center space-x-4 rounded-md border p-4">
274 |                       <div className="flex-1 space-y-1">
275 |                         <Switch />
276 |                         <p className="text-sm font-medium leading-none">
277 |                           Push Notifications
278 |                         </p>
279 |                         <p className="text-sm text-muted-foreground">
280 |                           Send notifications to device.
281 |                         </p>
282 |                       </div>
283 |                     </div>
284 |                     <div>
285 | 
286 |                     </div>
287 |                   </CardContent>
288 |                   <CardFooter className='flex flex-col space-y-2'>
289 |                     <Button className="w-full ">
290 |                       Create
291 |                     </Button>
292 |                     <Button variant={'secondary'} className="w-full">
293 |                       Secondary
294 |                     </Button>
295 |                     <Button variant={'destructive'} className="w-full">
296 |                       Destructive
297 |                     </Button>
298 |                     <Button variant={'ghost'} className="w-full">
299 |                       Ghost accent Hover
300 |                     </Button>
301 |                   </CardFooter>
302 |                 </Card>
303 |                 <div className='space-y-6 '>
304 |                   <Progress value={15} />
305 |                   <Progress value={35} />
306 |                   <Progress value={45} />
307 |                   <Progress value={100} />
308 |                 </div>
309 |                 <Tabs defaultValue="account">
310 |                   <TabsList className="grid w-full grid-cols-2">
311 |                     <TabsTrigger value="account">Account</TabsTrigger>
312 |                     <TabsTrigger value="password">Password</TabsTrigger>
313 |                   </TabsList>
314 |                   <TabsContent value="account">
315 |                     <Card>
316 |                       <CardHeader>
317 |                         <CardTitle>Account</CardTitle>
318 |                         <CardDescription>
319 |                           Make changes to your account here. Click save when you are  done.
320 |                         </CardDescription>
321 |                       </CardHeader>
322 |                       <CardContent className="space-y-2">
323 |                         <div className="space-y-1">
324 |                           <Label htmlFor="name">Name</Label>
325 |                           <Input id="name" defaultValue="Pedro Duarte" />
326 |                         </div>
327 |                         <div className="space-y-1">
328 |                           <Label htmlFor="username">Username</Label>
329 |                           <Input id="username" defaultValue="@peduarte" />
330 |                         </div>
331 |                       </CardContent>
332 |                       <CardFooter>
333 |                         <Button>Save changes</Button>
334 |                       </CardFooter>
335 |                     </Card>
336 |                   </TabsContent>
337 |                   <TabsContent value="password">
338 |                     <Card>
339 |                       <CardHeader>
340 |                         <CardTitle>Password</CardTitle>
341 |                         <CardDescription>
342 |                           Change your password here. After saving, you will be logged out.
343 |                         </CardDescription>
344 |                       </CardHeader>
345 |                       <CardContent className="space-y-2">
346 |                         <div className="space-y-1">
347 |                           <Label htmlFor="current">Current password</Label>
348 |                           <Input id="current" type="password" />
349 |                         </div>
350 |                         <div className="space-y-1">
351 |                           <Label htmlFor="new">New password</Label>
352 |                           <Input id="new" type="password" />
353 |                         </div>
354 |                       </CardContent>
355 |                       <CardFooter>
356 |                         <Button>Save password</Button>
357 |                       </CardFooter>
358 |                     </Card>
359 |                   </TabsContent>
360 |                 </Tabs>
361 | 
362 |                 <div className='space-y-6'>
363 |                   <Badge className='w-20 h-6'>Badge</Badge>
364 |                   <Slider defaultValue={[33]} max={100} step={1} />
365 |                   <Alert variant="default">
366 |                     <AlertCircle className="h-4 w-4" />
367 |                     <AlertTitle>Error</AlertTitle>
368 |                     <AlertDescription>
369 |                       Your session has expired. Please log in again.
370 |                     </AlertDescription>
371 |                   </Alert>
372 |                   <Alert variant="destructive">
373 |                     <AlertCircle className="h-4 w-4" />
374 |                     <AlertTitle>Error</AlertTitle>
375 |                     <AlertDescription>
376 |                       Your session has expired. Please log in again.
377 |                     </AlertDescription>
378 |                   </Alert>
379 |                 </div>
380 |               </div>
381 |             </div>
382 |           </div>
383 |         </div>
384 | 
385 |         <div className='container'>
386 |           <div className='mt-44 text-center'>
387 |             <span>Generated CSS</span>
388 |             <div className='text-left'>
389 |               <CopyBlock
390 |                 text={currentCSS}
391 |                 codeBlock
392 |                 language={'css'}
393 |                 theme={dracula}
394 |                 wrapLines
395 |               />
396 |             </div>
397 |           </div>
398 |         </div>
399 |       </main >
400 |     </>
401 |   )
402 | }
403 | 


--------------------------------------------------------------------------------
/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { VariantProps, cva } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-background text-foreground",
12 |         destructive:
13 |           "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | const Alert = React.forwardRef<
23 |   HTMLDivElement,
24 |   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25 | >(({ className, variant, ...props }, ref) => (
26 |   <div
27 |     ref={ref}
28 |     role="alert"
29 |     className={cn(alertVariants({ variant }), className)}
30 |     {...props}
31 |   />
32 | ))
33 | Alert.displayName = "Alert"
34 | 
35 | const AlertTitle = React.forwardRef<
36 |   HTMLParagraphElement,
37 |   React.HTMLAttributes<HTMLHeadingElement>
38 | >(({ className, ...props }, ref) => (
39 |   <h5
40 |     ref={ref}
41 |     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42 |     {...props}
43 |   />
44 | ))
45 | AlertTitle.displayName = "AlertTitle"
46 | 
47 | const AlertDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm [&_p]:leading-relaxed", className)}
54 |     {...props}
55 |   />
56 | ))
57 | AlertDescription.displayName = "AlertDescription"
58 | 
59 | export { Alert, AlertTitle, AlertDescription }
60 | 


--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { VariantProps, cva } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
13 |         secondary:
14 |           "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
15 |         destructive:
16 |           "bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { VariantProps, cva } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const buttonVariants = cva(
 7 |   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
12 |         destructive:
13 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14 |         outline:
15 |           "border border-input hover:bg-accent hover:text-accent-foreground",
16 |         secondary:
17 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
18 |         ghost: "hover:bg-accent hover:text-accent-foreground",
19 |         link: "underline-offset-4 hover:underline text-primary",
20 |       },
21 |       size: {
22 |         default: "h-10 py-2 px-4",
23 |         sm: "h-9 px-3 rounded-md",
24 |         lg: "h-11 px-8 rounded-md",
25 |       },
26 |     },
27 |     defaultVariants: {
28 |       variant: "default",
29 |       size: "default",
30 |     },
31 |   }
32 | )
33 | 
34 | export interface ButtonProps
35 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
36 |     VariantProps<typeof buttonVariants> {}
37 | 
38 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
39 |   ({ className, variant, size, ...props }, ref) => {
40 |     return (
41 |       <button
42 |         className={cn(buttonVariants({ variant, size, className }))}
43 |         ref={ref}
44 |         {...props}
45 |       />
46 |     )
47 |   }
48 | )
49 | Button.displayName = "Button"
50 | 
51 | export { Button, buttonVariants }
52 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-lg font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn(" flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 5 | import { Check } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Checkbox = React.forwardRef<
10 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12 | >(({ className, ...props }, ref) => (
13 |   <CheckboxPrimitive.Root
14 |     ref={ref}
15 |     className={cn(
16 |       "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
17 |       className
18 |     )}
19 |     {...props}
20 |   >
21 |     <CheckboxPrimitive.Indicator
22 |       className={cn("flex items-center justify-center text-primary")}
23 |     >
24 |       <Check className="h-4 w-4" />
25 |     </CheckboxPrimitive.Indicator>
26 |   </CheckboxPrimitive.Root>
27 | ))
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
29 | 
30 | export { Checkbox }
31 | 


--------------------------------------------------------------------------------
/components/ui/colorPicker.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useEffect, useRef, useState } from "react";
 2 | import { HexColorPicker } from "react-colorful";
 3 | 
 4 | import useClickOutside from "../../lib/useClickOutside";
 5 | import EditableTextField from "./editable-text-field";
 6 | 
 7 | type ColorPickerProps = {
 8 |     color: string
 9 |     onChange(newColor: string): void
10 |     text: string
11 | }
12 | export const ColorPicker = ({ color, onChange, text }: ColorPickerProps) => {
13 |     const popover = useRef(null);
14 |     const [isOpen, toggle] = useState(false);
15 |     const [currentText, setCurrentText] = useState(color)
16 |     
17 |     useEffect(() => {
18 |         setCurrentText(color)
19 |     }, [color])
20 | 
21 |     const close = useCallback(() => toggle(false), []);
22 |     useClickOutside(popover, close);
23 | 
24 |     return (
25 |         <div className="p-1 justify-between flex">
26 |             <div className="relative ">
27 |                 <div
28 |                     className="w-7 h-7 shadow-[0_0_0_1px_rgba(0,0,0,0.1),inset_0_0_0_1px_rgba(0,0,0,0.1)] cursor-pointer rounded-lg border-[3px] border-solid border-white"
29 |                     style={{ backgroundColor: color }}
30 |                     onClick={() => toggle(true)}
31 |                 />
32 |                 {isOpen && (
33 |                     <div className="absolute z-10 rounded-full left-0" ref={popover}>
34 |                         <HexColorPicker color={color} onChange={onChange} />
35 |                     </div>
36 |                 )}
37 |             </div>
38 | 
39 |             <span className='text-black ml-3'>{text}</span>
40 |             <EditableTextField text={currentText} setText={(update) => { setCurrentText(update); onChange(update) }} />
41 | 
42 |         </div>
43 |     );
44 | };
45 | 


--------------------------------------------------------------------------------
/components/ui/editable-text-field.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Input } from './input';
 3 | 
 4 | type EditableTextFieldProps = {
 5 |     text: string,
 6 |     setText(text: string): void
 7 | }
 8 | const EditableTextField = ({ text, setText }: EditableTextFieldProps) => {
 9 |     const [isEditing, setIsEditing] = useState(false);
10 |     const [currentText, setCurrentText] = useState(text);
11 | 
12 |     const handleInputChange = (event: { target: { value: any; }; }) => {
13 |         setCurrentText(event.target.value);
14 |     };
15 | 
16 |     const handleKeyDown = (event: { key: string; }) => {
17 |         if (event.key === 'Enter') {
18 |             setText(currentText);
19 |             setIsEditing(false);
20 |         } else if (event.key === 'Escape') {
21 |             setCurrentText(text);
22 |             setIsEditing(false);
23 |         }
24 |     };
25 | 
26 |     const handleFocus = () => {
27 |         setIsEditing(true);
28 |     };
29 | 
30 |     const handleBlur = () => {
31 |         setText(currentText);
32 |         setIsEditing(false);
33 |     };
34 | 
35 |     return (
36 |         <div className='ml-auto'>
37 |             {isEditing ? (
38 |                 <Input
39 |                     type="text"
40 |                     value={currentText}
41 |                     onChange={handleInputChange}
42 |                     onKeyDown={handleKeyDown}
43 |                     onBlur={handleBlur}
44 |                     autoFocus
45 |                 />
46 |             ) : (
47 |                 <span
48 |                     onClick={handleFocus}>{text}</span>
49 |             )}
50 |         </div>
51 |     );
52 | };
53 | 
54 | export default EditableTextField;


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { VariantProps, cva } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <ProgressPrimitive.Indicator
21 |       className="h-full w-full flex-1 bg-primary transition-all"
22 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
23 |     />
24 |   </ProgressPrimitive.Root>
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 | 
28 | export { Progress }
29 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectContent = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.Content>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 38 | >(({ className, children, position = "popper", ...props }, ref) => (
 39 |   <SelectPrimitive.Portal>
 40 |     <SelectPrimitive.Content
 41 |       ref={ref}
 42 |       className={cn(
 43 |         "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
 44 |         position === "popper" && "translate-y-1",
 45 |         className
 46 |       )}
 47 |       position={position}
 48 |       {...props}
 49 |     >
 50 |       <SelectPrimitive.Viewport
 51 |         className={cn(
 52 |           "p-1",
 53 |           position === "popper" &&
 54 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 55 |         )}
 56 |       >
 57 |         {children}
 58 |       </SelectPrimitive.Viewport>
 59 |     </SelectPrimitive.Content>
 60 |   </SelectPrimitive.Portal>
 61 | ))
 62 | SelectContent.displayName = SelectPrimitive.Content.displayName
 63 | 
 64 | const SelectLabel = React.forwardRef<
 65 |   React.ElementRef<typeof SelectPrimitive.Label>,
 66 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 67 | >(({ className, ...props }, ref) => (
 68 |   <SelectPrimitive.Label
 69 |     ref={ref}
 70 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
 71 |     {...props}
 72 |   />
 73 | ))
 74 | SelectLabel.displayName = SelectPrimitive.Label.displayName
 75 | 
 76 | const SelectItem = React.forwardRef<
 77 |   React.ElementRef<typeof SelectPrimitive.Item>,
 78 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 79 | >(({ className, children, ...props }, ref) => (
 80 |   <SelectPrimitive.Item
 81 |     ref={ref}
 82 |     className={cn(
 83 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 84 |       className
 85 |     )}
 86 |     {...props}
 87 |   >
 88 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 89 |       <SelectPrimitive.ItemIndicator>
 90 |         <Check className="h-4 w-4" />
 91 |       </SelectPrimitive.ItemIndicator>
 92 |     </span>
 93 | 
 94 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
 95 |   </SelectPrimitive.Item>
 96 | ))
 97 | SelectItem.displayName = SelectPrimitive.Item.displayName
 98 | 
 99 | const SelectSeparator = React.forwardRef<
100 |   React.ElementRef<typeof SelectPrimitive.Separator>,
101 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
102 | >(({ className, ...props }, ref) => (
103 |   <SelectPrimitive.Separator
104 |     ref={ref}
105 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
106 |     {...props}
107 |   />
108 | ))
109 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
110 | 
111 | export {
112 |   Select,
113 |   SelectGroup,
114 |   SelectValue,
115 |   SelectTrigger,
116 |   SelectContent,
117 |   SelectLabel,
118 |   SelectItem,
119 |   SelectSeparator,
120 | }
121 | 


--------------------------------------------------------------------------------
/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SliderPrimitive from "@radix-ui/react-slider"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Slider = React.forwardRef<
 9 |   React.ElementRef<typeof SliderPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SliderPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex w-full touch-none select-none items-center",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
21 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
22 |     </SliderPrimitive.Track>
23 |     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
24 |   </SliderPrimitive.Root>
25 | ))
26 | Slider.displayName = SliderPrimitive.Root.displayName
27 | 
28 | export { Slider }
29 | 


--------------------------------------------------------------------------------
/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
15 |       className
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ))
27 | Switch.displayName = SwitchPrimitives.Root.displayName
28 | 
29 | export { Switch }
30 | 


--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Tabs = TabsPrimitive.Root
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 | 


--------------------------------------------------------------------------------
/lib/colors.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | // thanks to https://github.com/javisperez/tailwindcolorshades
  4 | // @ts-nocheck 
  5 | // @ts-ignore
  6 | import colorNamer from "color-namer";
  7 | 
  8 | export type Palette = {
  9 |     name: string;
 10 |     colors: {
 11 |         [key: number]: string;
 12 |     };
 13 | };
 14 | 
 15 | type Rgb = {
 16 |     r: number;
 17 |     g: number;
 18 |     b: number;
 19 | };
 20 | 
 21 | function hexToRgb(hex: string): Rgb | null {
 22 |     const sanitizedHex = hex.replaceAll("##", "#");
 23 |     const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
 24 |         sanitizedHex
 25 |     );
 26 | 
 27 |     if (!colorParts) {
 28 |         return null;
 29 |     }
 30 | 
 31 |     const [, r, g, b] = colorParts;
 32 | 
 33 |     return {
 34 |         r: parseInt(r, 16),
 35 |         g: parseInt(g, 16),
 36 |         b: parseInt(b, 16)
 37 |     } as Rgb;
 38 | }
 39 | 
 40 | function rgbToHex(r: number, g: number, b: number): string {
 41 |     const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);
 42 |     return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 43 | }
 44 | 
 45 | export function getTextColor(color: string): "#FFF" | "#333" {
 46 |     const rgbColor = hexToRgb(color);
 47 | 
 48 |     if (!rgbColor) {
 49 |         return "#333";
 50 |     }
 51 | 
 52 |     const { r, g, b } = rgbColor;
 53 |     const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
 54 | 
 55 |     return luma < 120 ? "#FFF" : "#333";
 56 | }
 57 | 
 58 | function lighten(hex: string, intensity: number): string {
 59 |     const color = hexToRgb(`#${hex}`);
 60 | 
 61 |     if (!color) {
 62 |         return "";
 63 |     }
 64 | 
 65 |     const r = Math.round(color.r + (255 - color.r) * intensity);
 66 |     const g = Math.round(color.g + (255 - color.g) * intensity);
 67 |     const b = Math.round(color.b + (255 - color.b) * intensity);
 68 | 
 69 |     return rgbToHex(r, g, b);
 70 | }
 71 | 
 72 | function darken(hex: string, intensity: number): string {
 73 |     const color = hexToRgb(hex);
 74 | 
 75 |     if (!color) {
 76 |         return "";
 77 |     }
 78 | 
 79 |     const r = Math.round(color.r * intensity);
 80 |     const g = Math.round(color.g * intensity);
 81 |     const b = Math.round(color.b * intensity);
 82 | 
 83 |     return rgbToHex(r, g, b);
 84 | }
 85 | 
 86 | export function getColorName(color: string): string {
 87 |     const { name } = colorNamer(`#${color}`.replace("##", "#")).ntc[0];
 88 |     const sanitizedName = name
 89 |         .replace(/['/]/gi, "")
 90 |         .replace(/\s+/g, "-")
 91 |         .toLowerCase();
 92 | 
 93 |     return sanitizedName;
 94 | }
 95 | 
 96 | export function hexToHSL(H) {
 97 |     // Convert hex to RGB first
 98 |     let r = 0, g = 0, b = 0;
 99 |     if (H.length == 4) {
100 |         r = "0x" + H[1] + H[1];
101 |         g = "0x" + H[2] + H[2];
102 |         b = "0x" + H[3] + H[3];
103 |     } else if (H.length == 7) {
104 |         r = "0x" + H[1] + H[2];
105 |         g = "0x" + H[3] + H[4];
106 |         b = "0x" + H[5] + H[6];
107 |     }
108 |     // Then to HSL
109 |     r /= 255;
110 |     g /= 255;
111 |     b /= 255;
112 |     let cmin = Math.min(r, g, b),
113 |         cmax = Math.max(r, g, b),
114 |         delta = cmax - cmin,
115 |         h = 0,
116 |         s = 0,
117 |         l = 0;
118 | 
119 |     if (delta == 0)
120 |         h = 0;
121 |     else if (cmax == r)
122 |         h = ((g - b) / delta) % 6;
123 |     else if (cmax == g)
124 |         h = (b - r) / delta + 2;
125 |     else
126 |         h = (r - g) / delta + 4;
127 | 
128 |     h = Math.round(h * 60);
129 | 
130 |     if (h < 0)
131 |         h += 360;
132 | 
133 |     l = (cmax + cmin) / 2;
134 |     s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
135 |     s = +(s * 100).toFixed(1);
136 |     l = +(l * 100).toFixed(1);
137 | 
138 |     return "" + h + " " + s + "% " + l + "%";
139 | }
140 | 
141 | export function generatePalette(baseColor: string): Palette {
142 |     const name = getColorName(baseColor);
143 | 
144 |     const response: Palette = {
145 |         name,
146 |         colors: {
147 |             500: `#${baseColor}`.replace("##", "#")
148 |         }
149 |     };
150 | 
151 |     const intensityMap: {
152 |         [key: number]: number;
153 |     } = {
154 |         50: 0.95,
155 |         100: 0.9,
156 |         200: 0.75,
157 |         300: 0.6,
158 |         400: 0.3,
159 |         600: 0.9,
160 |         700: 0.75,
161 |         800: 0.6,
162 |         900: 0.49
163 |     };
164 | 
165 |     [50, 100, 200, 300, 400].forEach(level => {
166 |         response.colors[level] = lighten(baseColor, intensityMap[level]);
167 |     });
168 | 
169 |     [600, 700, 800, 900].forEach(level => {
170 |         response.colors[level] = darken(baseColor, intensityMap[level]);
171 |     });
172 | 
173 |     return response as Palette;
174 | }
175 | 


--------------------------------------------------------------------------------
/lib/useClickOutside.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | 
 3 | // Improved version of https://usehooks.com/useOnClickOutside/
 4 | const useClickOutside = (ref: any, handler: any) => {
 5 |   useEffect(() => {
 6 |     let startedInside = false;
 7 |     let startedWhenMounted = false;
 8 | 
 9 |     const listener = (event: { target: any; }) => {
10 |       // Do nothing if `mousedown` or `touchstart` started inside ref element
11 |       if (startedInside || !startedWhenMounted) return;
12 |       // Do nothing if clicking ref's element or descendent elements
13 |       if (!ref.current || ref.current.contains(event.target)) return;
14 | 
15 |       handler(event);
16 |     };
17 | 
18 |     const validateEventStart = (event: { target: any; }) => {
19 |       startedWhenMounted = ref.current;
20 |       startedInside = ref.current && ref.current.contains(event.target);
21 |     };
22 | 
23 |     document.addEventListener("mousedown", validateEventStart);
24 |     document.addEventListener("touchstart", validateEventStart);
25 |     document.addEventListener("click", listener);
26 | 
27 |     return () => {
28 |       document.removeEventListener("mousedown", validateEventStart);
29 |       document.removeEventListener("touchstart", validateEventStart);
30 |       document.removeEventListener("click", listener);
31 |     };
32 |   }, [ref, handler]);
33 | };
34 | 
35 | export default useClickOutside;
36 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   experimental: {
4 |     appDir: true,
5 |   },
6 | }
7 | 
8 | module.exports = nextConfig
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "theme-generator",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-accessible-icon": "^1.0.1",
13 |     "@radix-ui/react-accordion": "^1.1.0",
14 |     "@radix-ui/react-alert-dialog": "^1.0.2",
15 |     "@radix-ui/react-aspect-ratio": "^1.0.1",
16 |     "@radix-ui/react-avatar": "^1.0.2",
17 |     "@radix-ui/react-checkbox": "^1.0.3",
18 |     "@radix-ui/react-collapsible": "^1.0.1",
19 |     "@radix-ui/react-context-menu": "^2.1.1",
20 |     "@radix-ui/react-dialog": "^1.0.2",
21 |     "@radix-ui/react-dropdown-menu": "^2.0.1",
22 |     "@radix-ui/react-hover-card": "^1.0.3",
23 |     "@radix-ui/react-label": "^2.0.1",
24 |     "@radix-ui/react-menubar": "^1.0.0",
25 |     "@radix-ui/react-navigation-menu": "^1.1.1",
26 |     "@radix-ui/react-popover": "^1.0.2",
27 |     "@radix-ui/react-progress": "^1.0.2",
28 |     "@radix-ui/react-radio-group": "^1.1.0",
29 |     "@radix-ui/react-scroll-area": "^1.0.2",
30 |     "@radix-ui/react-select": "^1.2.1",
31 |     "@radix-ui/react-separator": "^1.0.1",
32 |     "@radix-ui/react-slider": "^1.1.1",
33 |     "@radix-ui/react-slot": "^1.0.1",
34 |     "@radix-ui/react-switch": "^1.0.2",
35 |     "@radix-ui/react-tabs": "^1.0.3",
36 |     "@radix-ui/react-toast": "^1.1.2",
37 |     "@radix-ui/react-toggle": "^1.0.1",
38 |     "@radix-ui/react-toggle-group": "^1.0.1",
39 |     "@radix-ui/react-tooltip": "^1.0.3",
40 |     "@types/node": "18.16.0",
41 |     "@types/react": "18.0.38",
42 |     "@types/react-dom": "18.0.11",
43 |     "autoprefixer": "10.4.14",
44 |     "class-variance-authority": "^0.5.2",
45 |     "clsx": "^1.2.1",
46 |     "color-namer": "^1.4.0",
47 |     "eslint": "8.39.0",
48 |     "eslint-config-next": "13.3.1",
49 |     "lucide-react": "^0.177.0",
50 |     "next": "13.3.1",
51 |     "openai": "^3.2.1",
52 |     "postcss": "8.4.23",
53 |     "react": "18.2.0",
54 |     "react-code-blocks": "^0.0.9-0",
55 |     "react-colorful": "^5.6.1",
56 |     "react-dom": "18.2.0",
57 |     "react-hot-toast": "^2.4.1",
58 |     "tailwind-merge": "^1.12.0",
59 |     "tailwindcss": "3.3.1",
60 |     "tailwindcss-animate": "^1.0.5",
61 |     "typescript": "5.0.4"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const { fontFamily } = require("tailwindcss/defaultTheme")
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   darkMode: ["class"],
 6 |   content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
 7 |   theme: {
 8 |     container: {
 9 |       center: true,
10 |       padding: "2rem",
11 |       screens: {
12 |         "2xl": "1400px",
13 |       },
14 |     },
15 |     extend: {
16 |       colors: {
17 |         border: "hsl(var(--border))",
18 |         input: "hsl(var(--input))",
19 |         ring: "hsl(var(--ring))",
20 |         background: "hsl(var(--background))",
21 |         foreground: "hsl(var(--foreground))",
22 |         primary: {
23 |           DEFAULT: "hsl(var(--primary))",
24 |           foreground: "hsl(var(--primary-foreground))",
25 |         },
26 |         secondary: {
27 |           DEFAULT: "hsl(var(--secondary))",
28 |           foreground: "hsl(var(--secondary-foreground))",
29 |         },
30 |         destructive: {
31 |           DEFAULT: "hsl(var(--destructive))",
32 |           foreground: "hsl(var(--destructive-foreground))",
33 |         },
34 |         muted: {
35 |           DEFAULT: "hsl(var(--muted))",
36 |           foreground: "hsl(var(--muted-foreground))",
37 |         },
38 |         accent: {
39 |           DEFAULT: "hsl(var(--accent))",
40 |           foreground: "hsl(var(--accent-foreground))",
41 |         },
42 |         popover: {
43 |           DEFAULT: "hsl(var(--popover))",
44 |           foreground: "hsl(var(--popover-foreground))",
45 |         },
46 |         card: {
47 |           DEFAULT: "hsl(var(--card))",
48 |           foreground: "hsl(var(--card-foreground))",
49 |         },
50 |       },
51 |       borderRadius: {
52 |         lg: `var(--radius)`,
53 |         md: `calc(var(--radius) - 2px)`,
54 |         sm: "calc(var(--radius) - 4px)",
55 |       },
56 |       fontFamily: {
57 |         sans: ["var(--font-sans)", ...fontFamily.sans],
58 |       },
59 |       keyframes: {
60 |           "text-shimmer": {
61 |             from: { backgroundPosition: "0 0" },
62 |             to: { backgroundPosition: "-200% 0" },
63 |           },        
64 |         "accordion-down": {
65 |           from: { height: 0 },
66 |           to: { height: "var(--radix-accordion-content-height)" },
67 |         },
68 |         "accordion-up": {
69 |           from: { height: "var(--radix-accordion-content-height)" },
70 |           to: { height: 0 },
71 |         },
72 |       },
73 |       animation: {
74 |         "accordion-down": "accordion-down 0.2s ease-out",
75 |         "text-shimmer": "text-shimmer 4.5s ease-out infinite alternate",
76 |         "accordion-up": "accordion-up 0.2s ease-out",
77 |       },
78 |     },
79 |   },
80 |   plugins: [require("tailwindcss-animate")],
81 | }
82 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------