2021-11-17 11:32:57 -07:00
|
|
|
import clsx from 'clsx';
|
2021-12-20 19:21:19 +02:00
|
|
|
import { SelectHTMLAttributes } from 'react';
|
2021-11-17 11:32:57 -07:00
|
|
|
|
|
|
|
interface Option<T extends string | number> {
|
|
|
|
value: T;
|
|
|
|
label: string;
|
|
|
|
}
|
|
|
|
|
2021-12-20 19:21:19 +02:00
|
|
|
interface Props<T extends string | number> {
|
2021-11-17 11:32:57 -07:00
|
|
|
options: Option<T>[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export function Select<T extends number | string>({
|
|
|
|
options,
|
|
|
|
className,
|
2021-12-20 19:21:19 +02:00
|
|
|
...props
|
|
|
|
}: Props<T> & SelectHTMLAttributes<HTMLSelectElement>) {
|
2021-11-17 11:32:57 -07:00
|
|
|
return (
|
|
|
|
<select
|
2021-12-20 19:21:19 +02:00
|
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
|
|
{...props}
|
|
|
|
className={clsx('form-control', className)}
|
2021-11-17 11:32:57 -07:00
|
|
|
>
|
|
|
|
{options.map((item) => (
|
2021-11-22 18:13:40 +02:00
|
|
|
<option value={item.value} key={item.value}>
|
|
|
|
{item.label}
|
|
|
|
</option>
|
2021-11-17 11:32:57 -07:00
|
|
|
))}
|
|
|
|
</select>
|
|
|
|
);
|
|
|
|
}
|