refactor: split form styles and combine components

I think it is better to keep styles close to the
corresponding components. So I splitted the unique
stylesheet.
I also combine select, textarea and input components
into a single one since they share the same logic and
the same styles.

1 files changed, 46 insertions, 0 deletions

diff --git a/src/components/FormElements/Toggle/Toggle.tsx b/src/components/FormElements/Toggle/Toggle.tsx
new file mode 100644
index 0000000..4db7d43
--- /dev/null
+++ b/src/components/FormElements/Toggle/Toggle.tsx
@@ -0,0 +1,46 @@
+import { FormEvent, ReactElement } from 'react';
+import { Form } from '..';
+import styles from './Toggle.module.scss';
+
+const Toggle = ({
+  id,
+  label,
+  value,
+  changeHandler,
+  leftChoice,
+  rightChoice,
+  name,
+}: {
+  id: string;
+  label: string;
+  value: boolean;
+  changeHandler: (value: boolean) => void;
+  leftChoice: ReactElement | string;
+  rightChoice: ReactElement | string;
+  name?: string;
+}) => {
+  const onSubmit = (e: FormEvent) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Form kind="settings" submitHandler={onSubmit}>
+      <input
+        className={styles.checkbox}
+        type="checkbox"
+        id={id}
+        name={name ? name : id}
+        checked={value}
+        onChange={() => changeHandler(!value)}
+      />
+      <label htmlFor={id} className={styles.label}>
+        <span className={styles.title}>{label}</span>
+        {leftChoice}
+        <span className={styles.toggle}></span>
+        {rightChoice}
+      </label>
+    </Form>
+  );
+};
+
+export default Toggle;