feat: Cria componente para o formulário de busca

src/components/Header/HeaderTop.tsx

@@ -1,24 +1,16 @@
 import styles from "../../styles/main.module.scss";
 import logoM3Academy from "../../assets/imgs/m3-academy-logo.png";
-import { Formik, Form, Field } from "formik";
 import searchIcon from "../../assets/icons/search-icon.svg";
 import cartIcon from "../../assets/icons/cart-icon.svg";
 import menuIcon from "../../assets/icons/menu-icon.svg";
 import { HeaderProps } from "./Header";
-
-interface SearchFormProps {
-    search: string;
-}
+import SearchBar from "../SearchBar";
 
 const initialValue = {
     search: "",
 };
 
 const HeaderTop = ({ isOpened, setIsOpened }: HeaderProps) => {
-    const handleFormSubmit = (values: SearchFormProps) => {
-        console.log(values);
-    };
-
     return (
         <section className={styles["header-top"]}>
             <button
@@ -36,22 +28,11 @@ const HeaderTop = ({ isOpened, setIsOpened }: HeaderProps) => {
                 />
             </a>
 
-            <Formik onSubmit={handleFormSubmit} initialValues={initialValue}>
-                <Form className={styles["header-search-form"]}>
-                    <Field
-                        className={styles["header-search-form__search-box"]}
-                        name="search"
-                        placeholder="Buscar..."
-                    />
-                    <button className={styles["header-search-form__search-button"]} type="submit">
-                        <img
-                            className={styles["header-search-form__search-image"]}
-                            src={searchIcon}
-                            alt="Search Icon"
-                        />
-                    </button>
-                </Form>
-            </Formik>
+            <SearchBar
+                placeholder="Buscar..."
+                parentClassName="header-search-form"
+                initialValues={initialValue}
+            />
 
             <div className={styles["header-login-area"]}>
                 <button

src/components/SearchBar.tsx

@@ -0,0 +1,43 @@
+import styles from "../styles/main.module.scss";
+import { Formik, Form, Field } from "formik";
+
+interface SearchBarProps {
+    search: string;
+}
+
+interface SearchFormProps {
+    placeholder: string;
+    parentClassName: string;
+    buttonText?: string;
+    initialValues: Object & SearchBarProps;
+}
+
+const SearchBar = ({
+    placeholder,
+    parentClassName,
+    buttonText,
+    initialValues,
+}: SearchFormProps) => {
+    if (!buttonText) buttonText = "";
+
+    const handleFormSubmit = (values: SearchBarProps) => {
+        console.log(values);
+    };
+
+    return (
+        <Formik onSubmit={handleFormSubmit} initialValues={initialValues}>
+            <Form className={styles[parentClassName]}>
+                <Field
+                    className={styles[parentClassName + "__search-box"]}
+                    name="search"
+                    placeholder={placeholder}
+                />
+                <button className={styles[parentClassName + "__search-button"]} type="submit">
+                    {buttonText}
+                </button>
+            </Form>
+        </Formik>
+    );
+};
+
+export default SearchBar;

src/styles/partials/footer.scss

@@ -77,7 +77,7 @@
 
         .util-buttons {
             position: absolute;
-            top: 41px;
+            top: 40px;
             right: 16px;
 
             &__return-top {

src/styles/partials/header.scss

@@ -76,6 +76,10 @@
                 border: 0;
                 background-color: transparent;
                 position: absolute;
+                height: 18px;
+                width: 18px;
+                background-image: url("../../assets/icons/search-icon.svg");
+                background-repeat: no-repeat;
                 top: 50%;
                 z-index: map-get($z-index, level-2);
                 transform: translateY(-50%);