Add initial app

src/components/ColorPicker.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react'
+
+type RGB = {
+  r: number
+  g: number
+  b: number
+}
+
+type HSL = {
+  h: number
+  s: number
+  l: number
+}
+
+type HSB = {
+  h: number
+  s: number
+  b: number
+}
+
+type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsb' | 'tailwind'
+
+export function ColorPicker() {
+  const [color, setColor] = useState('#6366F1') // Default to indigo-500
+  const [format, setFormat] = useState<ColorFormat>('hex')
+
+  return (
+    <div className="w-full max-w-2xl mx-auto p-6 space-y-6">
+      <div className="flex flex-col items-center gap-6">
+        <h1 className="text-3xl font-bold">Color Picker</h1>
+        
+        {/* Color Preview */}
+        <div 
+          className="w-32 h-32 rounded-lg shadow-lg border border-zinc-200"
+          style={{ backgroundColor: color }}
+        />
+
+        {/* Color Input */}
+        <div className="w-full max-w-md">
+          <div className="flex gap-2 mb-4">
+            {(['hex', 'rgb', 'hsl', 'hsb', 'tailwind'] as const).map((f) => (
+              <button
+                key={f}
+                onClick={() => setFormat(f)}
+                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors
+                  ${format === f 
+                    ? 'bg-indigo-500 text-white' 
+                    : 'bg-zinc-100 text-zinc-700 hover:bg-zinc-200'
+                  }`}
+              >
+                {f.toUpperCase()}
+              </button>
+            ))}
+          </div>
+
+          <div className="relative">
+            <input
+              type="text"
+              value={color}
+              onChange={(e) => setColor(e.target.value)}
+              className="w-full px-4 py-2 rounded-md border border-zinc-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              placeholder="Enter color value..."
+            />
+            <input
+              type="color"
+              value={color}
+              onChange={(e) => setColor(e.target.value)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 p-0 border-0 rounded-md cursor-pointer"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}