47 lines
No EOL
1.6 KiB
TypeScript
47 lines
No EOL
1.6 KiB
TypeScript
type SelectFieldProps<T extends string> = {
|
|
value: T;
|
|
onChange: (value: T) => void;
|
|
options: { value: T; label: string }[];
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* SelectField - A dropdown styled consistently with input fields
|
|
* Generic component that works with any string-based type (including string literals and enums)
|
|
*
|
|
* @example
|
|
* // With UserRole type
|
|
* <SelectField<UserRole>
|
|
* value={user.role}
|
|
* onChange={(role) => setUser({...user, role})}
|
|
* options={UserRoleHelper.getRoleOptions()}
|
|
* />
|
|
*
|
|
* @example
|
|
* // With plain strings
|
|
* <SelectField<string>
|
|
* value={status}
|
|
* onChange={setStatus}
|
|
* options={[{value: "active", label: "Active"}, {value: "inactive", label: "Inactive"}]}
|
|
* />
|
|
*/
|
|
export default function SelectField<T extends string>({
|
|
value,
|
|
onChange,
|
|
options,
|
|
className = ''
|
|
}: SelectFieldProps<T>) {
|
|
return (
|
|
<select
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value as T)}
|
|
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>
|
|
);
|
|
} |