recipe-app/frontend/src/components/basics/SelectField.tsx

25 lines
No EOL
865 B
TypeScript

type SelectFieldProps = {
value: string;
onChange: (value: string) => void;
options: { value: string; label: string }[];
className?: string;
};
/**
* SelectField - A dropdown styled consistently with input fields
*/
export default function SelectField({value, onChange, options, className = ''}: SelectFieldProps) {
return (
<select
value={value}
onChange={(e) => onChange(e.target.value)}
className={`p-2 w-full border rounded-md bg-white border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900 cursor-pointer ${className}`}
>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
);
}