diff options
Diffstat (limited to 'src/components/Form/Select/Select.tsx')
| -rw-r--r-- | src/components/Form/Select/Select.tsx | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/src/components/Form/Select/Select.tsx b/src/components/Form/Select/Select.tsx new file mode 100644 index 0000000..feab991 --- /dev/null +++ b/src/components/Form/Select/Select.tsx @@ -0,0 +1,56 @@ +import { ChangeEvent, ReactElement, SetStateAction } from 'react'; +import styles from './Select.module.scss'; + +type SelectOptions = { + id: string; + name: string; + value: string; +}; + +const Select = ({ + options, + id, + name, + value, + setValue, + required = false, + label, +}: { + options: SelectOptions[]; + id: string; + name: string; + value: string; + setValue: (value: SetStateAction<string>) => void; + required?: boolean; + label?: ReactElement; +}) => { + const getOptions = () => { + return options.map((option) => ( + <option key={option.id} value={option.value}> + {option.name} + </option> + )); + }; + + const handleChange = (event: ChangeEvent<HTMLSelectElement>) => { + setValue(event.target.value); + }; + + return ( + <> + {label} + <select + name={name} + id={id} + value={value} + onChange={handleChange} + required={required} + className={styles.wrapper} + > + {getOptions()} + </select> + </> + ); +}; + +export default Select; |
