aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Form/Input/Input.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2021-12-16 13:40:12 +0100
committerArmand Philippot <git@armandphilippot.com>2021-12-16 13:40:12 +0100
commiteb459cc248a5940a14193b20d263ffee3d345026 (patch)
tree92ea7b91d4481b4b61f86bef5299227e0bca1c3d /src/components/Form/Input/Input.tsx
parent94f1c1fbea903e677476a167e51b549bb0c53330 (diff)
chore: create contact page
Diffstat (limited to 'src/components/Form/Input/Input.tsx')
-rw-r--r--src/components/Form/Input/Input.tsx47
1 files changed, 47 insertions, 0 deletions
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
new file mode 100644
index 0000000..901b9ab
--- /dev/null
+++ b/src/components/Form/Input/Input.tsx
@@ -0,0 +1,47 @@
+import { ChangeEvent, SetStateAction } from 'react';
+import styles from '../Form.module.scss';
+
+type InputType = 'text' | 'number';
+
+const Input = ({
+ id,
+ name,
+ value,
+ setValue,
+ type = 'text',
+ required = false,
+ label,
+}: {
+ id: string;
+ name: string;
+ value: string;
+ setValue: (value: SetStateAction<string>) => void;
+ type?: InputType;
+ required?: boolean;
+ label?: string;
+}) => {
+ const updateValue = (e: ChangeEvent<HTMLInputElement>) => {
+ setValue(e.target.value);
+ };
+
+ return (
+ <>
+ {label && (
+ <label htmlFor={id} className={styles.label}>
+ {label}
+ {required && <span> *</span>}
+ </label>
+ )}
+ <input
+ type={type}
+ id={id}
+ name={name}
+ value={value}
+ onChange={updateValue}
+ className={styles.field}
+ />
+ </>
+ );
+};
+
+export default Input;