File size: 1,699 Bytes
529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 'use client';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Label } from '@/components/ui/label';
export interface SelectOption {
value: string | number;
label: string;
}
export interface SelectInputProps {
label: string;
value?: string | number;
defaultValue?: string | number;
options: SelectOption[];
onChange: (value: string | number) => void;
className?: string;
disabled?: boolean;
placeholder?: string;
helpText?: string;
}
export default function SelectInput({
label,
value,
defaultValue,
options,
onChange,
className = '',
disabled = false,
placeholder = 'Select an option',
helpText,
}: SelectInputProps) {
const currentValue = value ?? defaultValue;
return (
<div className={className}>
<Label>
{label}
</Label>
<Select
value={currentValue?.toString()}
onValueChange={(val) => {
const selectedOption = options.find(opt => opt.value.toString() === val);
if (selectedOption) {
onChange(selectedOption.value);
}
}}
disabled={disabled}
>
<SelectTrigger className="mt-2">
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
{options.map((option) => (
<SelectItem key={option.value.toString()} value={option.value.toString()}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
{helpText && (
<p className="text-xs text-muted-foreground mt-1">
{helpText}
</p>
)}
</div>
);
} |