feat(searchBox): Criando o componente de busca do header

.vscode/settings.json

@@ -5,7 +5,7 @@
     "**/.hg": true,
     "**/CVS": true,
     "**/.DS_Store": true,
-    "**/Thumbs.db": false
+    "**/Thumbs.db": true
   },
   "explorerExclude.backup": {}
 }

src/components/M3Logo/M3Logo.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import m3LogoImg from "./assets/image/Logo-M3Academy.svg";
+
+const M3Logo = () => {
+  return <img src={m3LogoImg} alt="M3 Academy logo" />;
+};
+
+export { M3Logo };

src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styles from "./searchBox.module.scss";
+import searchImg from "./assets/image/search_2.png";
+const SearchBox = () => {
+  return (
+    <div className={styles["search-wrapper"]}>
+      <input
+        className={styles["search-input"]}
+        id="title-name"
+        name="title-name"
+        type="text"
+        placeholder="Buscar..."
+        required
+      />
+      <button className={styles["buscaBtn"]}>
+        <img
+          className={styles["searchImg"]}
+          alt="Icone de busca"
+          src={searchImg}
+        />
+      </button>
+    </div>
+  );
+};
+
+export { SearchBox };

src/components/SearchBox/searchBox.module.scss

@@ -0,0 +1,63 @@
+.search-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+.search-input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 7px 16px;
+  gap: 10px;
+  width: 264px;
+  height: 32px;
+  /*
+  position: absolute;
+  
+  left: 508px;
+  top: 22px;
+    */
+  /* white */
+
+  background: #ffffff;
+  /* primary-700 */
+
+  border: 2px solid #f2f2f2;
+  border-radius: 5px;
+  @media screen and (min-width: 2500px) {
+    width: 515.62px;
+    height: 57px;
+  }
+}
+.buscaBtn {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  border-color: transparent;
+  border-radius: 5px;
+  background-color: white;
+  right: 30px;
+  top: 5px;
+  &::placeholder {
+    color: #c4c4c4;
+    font-weight: 400;
+    font-size: 14px;
+  }
+  @media screen and (min-width: 2500px) {
+    width: 35.15px;
+    height: 35.15px;
+    &::placeholder {
+      font-size: 28px;
+    }
+  }
+}
+
+.searchImg {
+  width: 18px;
+  height: 18px;
+
+  border-radius: 5px;
+  @media screen and (min-width: 2500px) {
+    width: 35.15px;
+    height: 35.15px;
+  }
+}

src/components/Socials/Socials.tsx

@@ -5,7 +5,6 @@ import instagramImg from "./assets/images/Instagram.png";
 import twitterImg from "./assets/images/Twitter.png";
 import youtubeImg from "./assets/images/Youtube.png";
 import linkedinImg from "./assets/images/Linkedin.png";
-import whatsappImg from "./assets/images/whatsapp.png";
 
 const Socials = () => {
   return (
@@ -26,9 +25,6 @@ const Socials = () => {
         <li className={styles["socials-item"]}>
           <img src={linkedinImg} alt="Linkedin" />
         </li>
-        <li className={styles["socials-item"]}>
-          <img src={whatsappImg} alt="Whatsapp" />
-        </li>
       </ul>
       <a className={styles["siteLink"]} href="/">
         www.loremipsum.com

src/components/Whatsapp/Whatsapp.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import whatsappImg from "./assets/image/whatsapp.png";
+
+const Whatsapp = () => {
+  return (
+    <div>
+      <img src={whatsappImg} alt="Whatsapp" />
+    </div>
+  );
+};
+
+export { Whatsapp };

src/pages/Home.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { FormInput } from "../components/FormInput/FormInput";
+import { SearchBox } from "../components/SearchBox/SearchBox";
 
 const Home = () => {
+  const style = { background: "white" };
   return (
-    <div>
-      <FormInput></FormInput>
+    <div style={style}>
+      <SearchBox></SearchBox>
     </div>
   );
 };

src/sectors/Header/TopHeader/styles.module.scss

@@ -1,4 +1,4 @@
-.TopHeader {
+/*.TopHeader {
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -59,3 +59,4 @@
     }
   }
 }
+/*