From 7c422e419b6066875d099228dce454bd844c68a7 Mon Sep 17 00:00:00 2001
From: Emerson Fully <63175980+emersonfully@users.noreply.github.com>
Date: Fri, 6 Jan 2023 14:58:49 -0300
Subject: [PATCH] feature(header): cria o header desktop

---
 src/components/header/Header.module.scss | 60 ++++++++++++++++++++++++
 src/components/header/Header.tsx         | 37 ++++++++++++++-
 src/components/header/HeaderNav.tsx      | 16 +++++++
 src/components/main/Main.tsx             |  6 +++
 src/global.scss                          |  4 ++
 src/pages/Home.tsx                       |  8 +++-
 6 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 src/components/header/Header.module.scss
 create mode 100644 src/components/header/HeaderNav.tsx
 create mode 100644 src/components/main/Main.tsx

diff --git a/src/components/header/Header.module.scss b/src/components/header/Header.module.scss
new file mode 100644
index 0000000..7c3f9bd
--- /dev/null
+++ b/src/components/header/Header.module.scss
@@ -0,0 +1,60 @@
+header {
+  background-color: black;
+}
+
+.header__container {
+  height: 76px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.container__logo {
+  position: absolute;
+  left: 100px;
+  width: 136px;
+}
+
+.container__searchbar {
+  padding: 8px 16px;
+  width: 264px;
+  height: 32px;
+  border: 2px solid #f2f2f2;
+  border-radius: 5px;
+}
+
+.container__cart__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  position: absolute;
+  right: 100px;
+
+  & a {
+    color: white;
+    text-transform: uppercase;
+  }
+}
+
+.cart__wrapper__icon {
+  width: 30px;
+  margin-left: 55px;
+}
+
+.header__container__nav {
+  padding: 14px 0;
+  height: 50px;
+
+  .nav__wrapper {
+    margin-left: 100px;
+  }
+
+  & a {
+    color: white;
+    margin-right: 50px;
+    text-transform: uppercase;
+  }
+}
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index ed11ab6..3823a3a 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -1,7 +1,42 @@
 import React from "react";
+import style from "./Header.module.scss";
+import logoM3 from "../../assets/imgs/logoM3Academy.png";
+import cart from "../../assets/imgs/cart.png";
+import { HeaderNav } from "./HeaderNav";
 
 const Header = () => {
-  return <div></div>;
+  return (
+    <header>
+      <div className={style.header__container}>
+        <a href="/">
+          <img
+            className={style.container__logo}
+            src={logoM3}
+            alt="Logo M3 Academy"
+          />
+        </a>
+        <div className={style.container__searchbar__wrapper}>
+          <input
+            className={style.container__searchbar}
+            type="text"
+            placeholder="Buscar..."
+          />
+        </div>
+        <div className={style.container__cart__wrapper}>
+          <a href="/">Entrar</a>
+          <a href="/">
+            <img
+              className={style.cart__wrapper__icon}
+              src={cart}
+              alt="Carrinho de compras"
+            />
+          </a>
+        </div>
+      </div>
+      <hr />
+      <HeaderNav />
+    </header>
+  );
 };
 
 export { Header };
diff --git a/src/components/header/HeaderNav.tsx b/src/components/header/HeaderNav.tsx
new file mode 100644
index 0000000..e318aa7
--- /dev/null
+++ b/src/components/header/HeaderNav.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import style from "./Header.module.scss";
+
+const HeaderNav = () => {
+  return (
+    <nav className={style.header__container__nav}>
+      <div className={style.nav__wrapper}>
+        <a href="/">Cursos</a>
+        <a href="/">Saiba mais</a>
+        <a href="/">Institucionais</a>
+      </div>
+    </nav>
+  );
+};
+
+export { HeaderNav };
diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
new file mode 100644
index 0000000..3266649
--- /dev/null
+++ b/src/components/main/Main.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+const Main = () => {
+  return <div></div>;
+};
+
+export { Main };
diff --git a/src/global.scss b/src/global.scss
index 5aa7f1b..fd125fd 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -12,6 +12,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+a {
+  text-decoration: none;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 10862a3..83479fd 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,12 @@
 import React from "react";
+import { Header } from "../components/header/Header";
+
 const Home = () => {
-  return <div></div>;
+  return (
+    <div>
+      <Header />
+    </div>
+  );
 };
 
 export { Home };