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, 27 insertions, 0 deletions

diff --git a/src/components/FormElements/Form/Form.tsx b/src/components/FormElements/Form/Form.tsx
new file mode 100644
index 0000000..10fdcdf
--- /dev/null
+++ b/src/components/FormElements/Form/Form.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import styles from './Form.module.scss';
+
+type FormKind = 'centered' | 'search' | 'settings';
+
+const Form = ({
+  children,
+  submitHandler,
+  kind,
+  id,
+}: {
+  children: ReactNode;
+  submitHandler: any;
+  kind?: FormKind;
+  id?: string;
+}) => {
+  const kindStyles = kind ? styles[kind] : '';
+  const classes = `${styles.wrapper} ${kindStyles}`;
+
+  return (
+    <form onSubmit={submitHandler} className={classes} id={id}>
+      {children}
+    </form>
+  );
+};
+
+export default Form;