chore: define search form visibility

3 files changed, 37 insertions, 21 deletions

diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
index f23dfde..891db19 100644
--- a/src/components/Form/Form.module.scss
+++ b/src/components/Form/Form.module.scss
@@ -2,6 +2,11 @@
 
 .wrapper {
   width: 100%;
+
+  &--search {
+    display: flex;
+    flex-flow: row nowrap;
+  }
 }
 
 .item {
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 5e26e81..dd1bc63 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -4,12 +4,19 @@ import styles from './Form.module.scss';
 const Form = ({
   children,
   submitHandler,
+  modifier = '',
 }: {
   children: ReactNode;
   submitHandler: any;
+  modifier?: string;
 }) => {
+  const classes =
+    modifier !== ''
+      ? `${styles.wrapper} ${styles[`wrapper--${modifier}`]}`
+      : styles.wrapper;
+
   return (
-    <form onSubmit={submitHandler} className={styles.wrapper}>
+    <form onSubmit={submitHandler} className={classes}>
       {children}
     </form>
   );
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
index 901b9ab..2ee214b 100644
--- a/src/components/Form/Input/Input.tsx
+++ b/src/components/Form/Input/Input.tsx
@@ -1,25 +1,28 @@
-import { ChangeEvent, SetStateAction } from 'react';
+import { ChangeEvent, ForwardedRef, forwardRef, SetStateAction } from 'react';
 import styles from '../Form.module.scss';
 
-type InputType = 'text' | 'number';
+type InputType = 'text' | 'number' | 'search';
 
-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 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;
+  },
+  ref: ForwardedRef<HTMLInputElement>
+) => {
   const updateValue = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
   };
@@ -33,6 +36,7 @@ const Input = ({
         </label>
       )}
       <input
+        ref={ref}
         type={type}
         id={id}
         name={name}
@@ -44,4 +48,4 @@ const Input = ({
   );
 };
 
-export default Input;
+export default forwardRef(Input);