feat(header):searchbox com formik estilizada e responsiva

desafio-5/package.json

@@ -10,13 +10,15 @@
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "formik": "^2.2.9",
     "node-sass": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "sass-loader": "^13.2.0",
     "typescript": "^4.9.4",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

desafio-5/src/components/modules/header.module.scss

@@ -42,10 +42,11 @@
         width: 24.445%;
         height: 5.334vh;
         max-width: 514.62px;
-        max-height: 56px;
+        max-height: 28.8px;
         position: relative;
         display: flex;
         align-items: center;
+
         input{
             width: 100%;
             height: 100%;
@@ -53,6 +54,7 @@
             background: $-white;
             border: 2px solid $-gray-200;
             border-radius: 5px;
+            outline: 0;
         }
         input[placeholder] {
             //digitação
@@ -65,13 +67,13 @@
         }
         button{
             position: absolute;
-            top: 0;
-            right: 0;
-            margin: 2.652% 16px;
+            top: 7px;
+            right: 16px;
             width: 6.82%;
-            height: 56.25%;
+            height: 62.52%;
             img{
                 width: 100%;
+                height: 100%;
             }
         }
     }
@@ -96,12 +98,12 @@
         }
 
         &-cart{
-            min-height: 28px;
-            max-height: 52px;
+            height: 28px;
+            width: 28px;
             img{
                 min-width: 28px;
                 width: 100%;
-                max-width: 52px;
+                min-height:28px;
             }
         }
     }
@@ -151,6 +153,7 @@
 .Header_wrapper {
     height: 15.312vh;
     max-height: 100%;
+    min-height: 160px;
 
     // Top-header
 
@@ -162,6 +165,7 @@
     &-Searchbox{
         width: 22.435%;
         height: 5.388vh;
+        min-height: 58px;
         max-width: 100%;
         max-height: 100%;
 

desafio-5/src/components/scripts/header.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} from "react"
+import { Formik,Form, Field, FormikHelpers } from 'formik';
 
 import { Submenu } from "../../Modal/submenuModal";
 import {SubmenuContext} from "../../contexts/SubmenuContext";
@@ -11,9 +12,20 @@ import Lupa from "../assets/icons/search_Icon_desk.svg";
 import Cart from "../assets/icons/cart_desk_icon.svg";
 import MenuMobile from "../assets/icons/Hamburger_menu.svg";
 
+interface SearchboxTypes {
+    search:string
+}
+
+const initialValues = {
+    search:""
+}
+
 const Header = () =>{
 
     const { isOpened, setisOpened } = useContext(SubmenuContext)
+    const handleSeacrhFormikSubmit = (values:SearchboxTypes, formik: FormikHelpers<SearchboxTypes>) =>{
+        formik.resetForm();
+    }
 
     return (
         <div className={HeaderStyles["Header_wrapper"]}>
@@ -23,15 +35,21 @@ const Header = () =>{
                         <img src={Logo} alt="Logo" />
                     </a>
                 </fieldset>
-                <div className={HeaderStyles["Header_wrapper-top-Searchbox"]}>
-                    <input name="search" type="text" placeholder="Buscar">
-                    </input>
-                    <label htmlFor="search">
-                        <button>
-                            <img src={Lupa} alt="Lupa" />
-                        </button>
-                    </label>
-                </div>
+                    <Formik
+                            initialValues={initialValues}
+                            onSubmit={handleSeacrhFormikSubmit}
+                    >
+                        <Form className={HeaderStyles["Header_wrapper-top-Searchbox"]}>
+                            <Field id="search" name="search" type="text" placeholder="Buscar" />
+                            <label htmlFor="search">
+                                <button>
+                                    <img src={Lupa} alt="Lupa" />
+                                </button>
+                            </label>
+                        </Form>
+                    </Formik>
+
+
                 <div className={HeaderStyles["Header_wrapper-top-menu"]}>
                     <button className={HeaderStyles["Header_wrapper-top-menu-login"]}>Entrar</button>
                     <button className={HeaderStyles["Header_wrapper-top-menu-cart"]}>
@@ -60,16 +78,19 @@ const Header = () =>{
                 </button>
             </div>
             <div className={HeaderStyles["Header_wrapper-mobilebottom"]}>
-
-                <div className={HeaderStyles["Header_wrapper-mobilebottom-Searchbox"]}>
-                        <input name="search" type="text" placeholder="Buscar">
-                        </input>
-                        <label htmlFor="search">
-                            <button>
-                                <img src={Lupa} alt="Lupa" />
-                            </button>
-                        </label>
-                </div>
+                <Formik
+                        initialValues={initialValues}
+                        onSubmit={handleSeacrhFormikSubmit}
+                        >
+                            <Form className={HeaderStyles["Header_wrapper-mobilebottom-Searchbox"]}>
+                                <Field id="search" name="search" type="text" placeholder="Buscar" />
+                                <label htmlFor="search">
+                                    <button>
+                                        <img src={Lupa} alt="Lupa" />
+                                    </button>
+                                </label>
+                            </Form>
+                </Formik>
             </div>
 
             <div className={HeaderStyles["Header_wrapper-bottom"]}>