refactor: update UI component usage to match latest shadcn APIs

app/(app)/pastel/colorblind/page.tsx

@@ -3,8 +3,14 @@
 import { useState } from 'react';
 import { ColorPicker } from '@/components/pastel/color/ColorPicker';
 import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
-import { Button } from '@/components/ui/Button';
-import { Select } from '@/components/ui/Select';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useSimulateColorBlindness } from '@/lib/pastel/api/queries';
 import { Loader2, Eye, Plus, X } from 'lucide-react';
 import { toast } from 'sonner';
@@ -113,13 +119,17 @@ export default function ColorBlindPage() {
               <h2 className="text-sm font-medium mb-4">Blindness Type</h2>
               <div className="space-y-4">
                 <Select
-                  label="Type"
                   value={blindnessType}
-                  onChange={(e) => setBlindnessType(e.target.value as ColorBlindnessType)}
+                  onValueChange={(value) => setBlindnessType(value as ColorBlindnessType)}
                 >
-                  <option value="protanopia">Protanopia (Red-blind)</option>
-                  <option value="deuteranopia">Deuteranopia (Green-blind)</option>
-                  <option value="tritanopia">Tritanopia (Blue-blind)</option>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="protanopia">Protanopia (Red-blind)</SelectItem>
+                    <SelectItem value="deuteranopia">Deuteranopia (Green-blind)</SelectItem>
+                    <SelectItem value="tritanopia">Tritanopia (Blue-blind)</SelectItem>
+                  </SelectContent>
                 </Select>
 
                 <p className="text-sm text-muted-foreground">