summaryrefslogtreecommitdiffstats
path: root/src/components/Form/Select/Select.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Form/Select/Select.tsx')
-rw-r--r--src/components/Form/Select/Select.tsx56
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;