From a6ca4e21a11d3401a43f30b2e025f0f6426c7351 Mon Sep 17 00:00:00 2001
From: DaviHKlein <davihgklein@gmail.com>
Date: Fri, 20 Jan 2023 19:44:16 -0300
Subject: [PATCH] feat(Header): Adiciona estrutura do header

---
 src/components/Header/ContentMenuHeader.tsx | 19 +++++++++
 src/components/Header/HeaderDesktop.tsx     | 44 +++++++++++++++++++++
 src/components/Header/HeaderMobile.tsx      | 38 ++++++++++++++++++
 3 files changed, 101 insertions(+)
 create mode 100644 src/components/Header/ContentMenuHeader.tsx
 create mode 100644 src/components/Header/HeaderDesktop.tsx
 create mode 100644 src/components/Header/HeaderMobile.tsx

diff --git a/src/components/Header/ContentMenuHeader.tsx b/src/components/Header/ContentMenuHeader.tsx
new file mode 100644
index 0000000..a11f752
--- /dev/null
+++ b/src/components/Header/ContentMenuHeader.tsx
@@ -0,0 +1,19 @@
+import { NavLink } from "react-router-dom";
+
+export const ContentMenuHeader = () => {
+  return (
+    <>
+      <div className="ContentHeader_wrapper">
+        <NavLink to={"/"}>
+          <button>CURSOS</button>
+        </NavLink>
+        <NavLink to={"/"}>
+          <button>SAIBA MAIS</button>
+        </NavLink>
+        <NavLink to={"/"}>
+          <button>INSTITUCIONAIS</button>
+        </NavLink>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Header/HeaderDesktop.tsx b/src/components/Header/HeaderDesktop.tsx
new file mode 100644
index 0000000..c29e19e
--- /dev/null
+++ b/src/components/Header/HeaderDesktop.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+import LogoM3 from "../assets/imgs/SVGs/M3Logo_desktop.svg";
+import CartIcon from "../assets/imgs/SVGs/CartIcon_desktop.svg";
+
+import { ContentMenuHeader } from "./ContentMenuHeader";
+
+import "./HeaderDesktop.modules.scss";
+
+export const HeaderDesktop = () => {
+  return (
+    <>
+      <section className="HeaderDesktop">
+        <div className="m3LogoWrapper">
+          <NavLink to={"/"}>
+            <img src={LogoM3} alt="LogoM3" className="M3Logo" />
+          </NavLink>
+        </div>
+        <div className="Search_Header_wrapper">
+          <input
+            name="Search_Header"
+            className="Search_Header"
+            placeholder="Buscar..."
+          />
+          <label className="InconWrapper" htmlFor={"Search_Header"}></label>
+        </div>
+        <div className="Headerlinks">
+          <NavLink to={"/"} className="EnterLink">
+            ENTRAR
+          </NavLink>
+          <div className="CartIcon_Wrapper">
+            <NavLink to={"/"}>
+              <img src={CartIcon} alt="Cart-Icon" className="CartIcon" />
+            </NavLink>
+          </div>
+        </div>
+      </section>
+      <div className="Header_botom">
+        <ContentMenuHeader />
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Header/HeaderMobile.tsx b/src/components/Header/HeaderMobile.tsx
new file mode 100644
index 0000000..e87fc82
--- /dev/null
+++ b/src/components/Header/HeaderMobile.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+
+import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg";
+import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg";
+import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg";
+import { MenuHeader } from "../MenuHeader";
+
+import "./HeaderMobile.modules.scss";
+
+export const HeaderMobile = () => {
+  const [isOpened, setIsOpened] = useState(false);
+  return (
+    <>
+      <section className="HeaderMobile">
+        <div className="topHeaderMobile">
+          <MenuHeader isOpened={isOpened} setIsOpened={setIsOpened} />
+          <button className="MenuIcon" onClick={() => setIsOpened(true)}>
+            <img src={MenuHamburguer} alt="" />
+          </button>
+          <div>
+            <NavLink to={"/"}>
+              <img src={LogoM3} alt="LogoM3" className="M3Logo" />
+            </NavLink>
+          </div>
+          <div>
+            <NavLink to={"/"}>
+              <img src={CartIcon} alt="CartIcon" className="CartIcon" />
+            </NavLink>
+          </div>
+        </div>
+        <div className="Search_Header_wrapper">
+          <input className="Search_Header" placeholder="Buscar..." />
+        </div>
+      </section>
+    </>
+  );
+};