Initial release v1.0.0

frontend/features/settings/components/ui/SettingsSelect.tsx

@@ -0,0 +1,45 @@
+import { ChevronDown } from "lucide-react";
+
+interface Option {
+    value: string;
+    label: string;
+    description?: string;
+}
+
+interface SettingsSelectProps {
+    id?: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: Option[];
+    disabled?: boolean;
+}
+
+export function SettingsSelect({ id, value, onChange, options, disabled }: SettingsSelectProps) {
+    return (
+        <div className="relative">
+            <select
+                id={id}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                disabled={disabled}
+                className={`
+                    appearance-none bg-[#333] text-white text-sm
+                    pl-3 pr-8 py-1.5 rounded-md
+                    border-0 outline-none
+                    focus:ring-2 focus:ring-white/20
+                    cursor-pointer transition-colors
+                    hover:bg-[#404040]
+                    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+                `}
+            >
+                {options.map((option) => (
+                    <option key={option.value} value={option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+            <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+        </div>
+    );
+}
+