feat: add media converter app and fix compilation errors

components/pastel/ColorPicker.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { HexColorPicker } from 'react-colorful';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils/cn';
+
+interface ColorPickerProps {
+  color: string;
+  onChange: (color: string) => void;
+  className?: string;
+}
+
+export function ColorPicker({ color, onChange, className }: ColorPickerProps) {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    // Allow partial input while typing
+    onChange(value);
+  };
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <HexColorPicker color={color} onChange={onChange} className="w-full" />
+      <div className="space-y-2">
+        <label htmlFor="color-input" className="text-sm font-medium">
+          Color Value
+        </label>
+        <Input
+          id="color-input"
+          type="text"
+          value={color}
+          onChange={handleInputChange}
+          placeholder="#ff0099 or rgb(255, 0, 153)"
+          className="font-mono"
+        />
+      </div>
+    </div>
+  );
+}