From 8e95910e8a4fbda3de59f3ad62ffd2f029ba5622 Mon Sep 17 00:00:00 2001
From: MarcelloMartins <marcello08martins@outlook.com>
Date: Thu, 5 Jan 2023 21:55:56 -0300
Subject: [PATCH] feat(header): created html and scss top header

---
 src/App.tsx                              |   2 +
 src/assets/cart.svg                      |  12 +++++
 src/assets/logoM3.png                    | Bin 0 -> 2927 bytes
 src/assets/lupa.svg                      |   3 ++
 src/components/Header/index.tsx          |  26 ++++++++++
 src/components/Header/styles.module.scss |  62 +++++++++++++++++++++++
 6 files changed, 105 insertions(+)
 create mode 100644 src/assets/cart.svg
 create mode 100644 src/assets/logoM3.png
 create mode 100644 src/assets/lupa.svg
 create mode 100644 src/components/Header/index.tsx
 create mode 100644 src/components/Header/styles.module.scss

diff --git a/src/App.tsx b/src/App.tsx
index fcf82d5..8ad0e4b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import "./App.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Home from "./pages/Home";
 import Institutional from "./pages/Institutional";
@@ -19,6 +20,7 @@ const router = createBrowserRouter([
 function App() {
   return (
     <div className="App">
+      <Header />
       <RouterProvider router={router} />
       <Footer />
     </div>
diff --git a/src/assets/cart.svg b/src/assets/cart.svg
new file mode 100644
index 0000000..645fdb3
--- /dev/null
+++ b/src/assets/cart.svg
@@ -0,0 +1,12 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5537_970)">
+<path d="M27.823 4.07236C27.6697 3.88079 27.4377 3.76928 27.1923 3.76928H5.69581L5.09469 1.16451C5.01009 0.798054 4.68377 0.538452 4.30768 0.538452H0.80768C0.361648 0.538452 0 0.9001 0 1.34619C0 1.79227 0.361648 2.15387 0.80768 2.15387H3.66516L7.7455 19.8355C7.83005 20.2019 8.15642 20.4615 8.53251 20.4615H24.7154C25.1614 20.4615 25.523 20.0999 25.523 19.6539C25.523 19.2078 25.1614 18.8462 24.7154 18.8462H9.17509L8.55384 16.1539H24.7693C25.1471 16.1539 25.4744 15.892 25.5573 15.5235L27.9803 4.75426C28.0342 4.51483 27.9763 4.26398 27.823 4.07236Z" fill="white"/>
+<path d="M11.8462 21.5385C10.2132 21.5385 8.88464 22.867 8.88464 24.5C8.88464 26.133 10.2132 27.4615 11.8462 27.4615C13.4792 27.4615 14.8077 26.133 14.8077 24.5C14.8077 22.867 13.4792 21.5385 11.8462 21.5385Z" fill="white"/>
+<path d="M21.5385 21.5385C19.9055 21.5385 18.5769 22.867 18.5769 24.5C18.5769 26.133 19.9054 27.4615 21.5385 27.4615C23.1714 27.4615 24.5 26.133 24.5 24.5C24.5 22.867 23.1715 21.5385 21.5385 21.5385Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_5537_970">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/logoM3.png b/src/assets/logoM3.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c273bfea448e74f8bc2513e32368f5e126e01c5
GIT binary patch
literal 2927
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
Z@jvm1sJ=-Ss`~%{002ovPDHLkV1n|#rbPe%

literal 0
HcmV?d00001

diff --git a/src/assets/lupa.svg b/src/assets/lupa.svg
new file mode 100644
index 0000000..9f9b9f0
--- /dev/null
+++ b/src/assets/lupa.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2094 11.6186C14.0951 10.409 14.6249 8.92328 14.6249 7.31261C14.6249 3.28064 11.3444 0.00012207 7.31245 0.00012207C3.28048 0.00012207 0 3.28064 0 7.31261C0 11.3446 3.28052 14.6251 7.31248 14.6251C8.92315 14.6251 10.409 14.0952 11.6186 13.2094L16.4092 18L18 16.4092C18 16.4092 13.2094 11.6186 13.2094 11.6186ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1042 2.25001 7.31261C2.25001 4.52098 4.52086 2.25013 7.31248 2.25013C10.1041 2.25013 12.375 4.52098 12.375 7.31261C12.375 10.1042 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
+</svg>
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 0000000..5450cc0
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,26 @@
+import styles from "./styles.module.scss";
+import Logo from "../../assets/logoM3.png";
+import Lupa from "../../assets/lupa.svg";
+import Cart from "../../assets/cart.svg";
+
+export default function Header() {
+  return (
+    <>
+      <header className={styles.Header}>
+        <div className={styles.firstDiv}>
+          <img className={styles.logo} src={Logo} alt="logo m3" />
+          <div className={styles.searchDiv}>
+            <input type="text" placeholder="Buscar..."></input>
+            <img src={Lupa} alt="lupa" />
+          </div>
+          <div className={styles.headerButton}>
+            <button className={styles.buttonEntrar}>Entrar</button>
+            <button className={styles.cartButton}>
+              <img src={Cart} alt="carrinho de compra" />
+            </button>
+          </div>
+        </div>
+      </header>
+    </>
+  );
+}
diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss
new file mode 100644
index 0000000..1e397a6
--- /dev/null
+++ b/src/components/Header/styles.module.scss
@@ -0,0 +1,62 @@
+.Header {
+  background: black;
+  padding: 22px 0;
+  color: white;
+  .firstDiv {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .searchDiv {
+      input {
+        padding-left: 16px;
+        font-size: 14px;
+        height: 32px;
+        border-radius: 5px;
+        border: 2px solid #f2f2f2;
+        width: 100%;
+      }
+      width: 20.63vw;
+      position: relative;
+      display: flex;
+      img {
+        padding: 7px 0px;
+        display: flex;
+        width: 1.41vw;
+        position: absolute;
+        right: 20px;
+      }
+    }
+    .headerButton {
+      display: flex;
+      gap: 55px;
+      padding-right: 7.81vw;
+      height: 28px;
+      .buttonEntrar {
+        justify-content: center;
+        text-transform: uppercase;
+        align-items: center;
+        display: flex;
+        font-weight: 400;
+        font-size: 14px;
+        color: white;
+        background: black;
+        height: 28px;
+        border: 0;
+      }
+      .cartButton {
+        img {
+          display: flex;
+          height: 28px;
+        }
+        background: black;
+        height: 28px;
+        border: 0;
+      }
+    }
+    .logo {
+      display: flex;
+      //   padding-left: 7.81vw;
+      padding: 5px 0 7px 7.81vw;
+    }
+  }
+}