46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
}
|
|
|