From 767ec819cae9696730b69a80dd98d73f196f2348 Mon Sep 17 00:00:00 2001
From: Samuel <samuelcondackxz@gmail.com>
Date: Sun, 8 Jan 2023 11:00:21 -0300
Subject: [PATCH] Feat: Adiciona o HeaderBottom e o estilo do HeaderBottom

---
 my-app/src/assets/svgs/Search.svg               |  3 +++
 .../src/components/Header/Header.modules.scss   | 16 +++++++++++++---
 my-app/src/components/Header/Header.tsx         |  6 ++++--
 .../HeaderBottom/HeaderBottom.modules.scss      | 17 +++++++++++++++++
 .../components/HeaderBottom/HeaderBottom.tsx    | 17 +++++++++++++++++
 my-app/src/pages/Home.tsx                       |  2 ++
 6 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 my-app/src/assets/svgs/Search.svg
 create mode 100644 my-app/src/components/HeaderBottom/HeaderBottom.modules.scss
 create mode 100644 my-app/src/components/HeaderBottom/HeaderBottom.tsx

diff --git a/my-app/src/assets/svgs/Search.svg b/my-app/src/assets/svgs/Search.svg
new file mode 100644
index 0000000..9f9b9f0
--- /dev/null
+++ b/my-app/src/assets/svgs/Search.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/my-app/src/components/Header/Header.modules.scss b/my-app/src/components/Header/Header.modules.scss
index fb905d0..65bef17 100644
--- a/my-app/src/components/Header/Header.modules.scss
+++ b/my-app/src/components/Header/Header.modules.scss
@@ -20,9 +20,11 @@
     height: 32px;
     display: flex;
     align-items: center;
-    padding-left: 16px;
+    justify-content: space-between;
+    padding: 7px 16px;
 }
 .SearchInput{
+    width: 100%;
     border: none;
     color: #C6C6C6;
     font-family: 'Roboto';
@@ -31,14 +33,22 @@
     font-size: 14px;
     line-height: 16px;
     &:focus{
-        border: none;
+        color: #000;
+        outline: none;
     }
 }
+.LoginAndCart{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
 .loginlink{
     text-decoration: none;
     color: #FFFFFF;
     margin-right: 55px;
+    width: 100%;
 }
 .carticon{
-    align-items: center;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/my-app/src/components/Header/Header.tsx b/my-app/src/components/Header/Header.tsx
index 51590c9..843181e 100644
--- a/my-app/src/components/Header/Header.tsx
+++ b/my-app/src/components/Header/Header.tsx
@@ -1,19 +1,21 @@
 // import { NavLink } from "react-router-dom"
 import Logo from "../../assets/svgs/Logo.svg";
 import Cart from "../../assets/svgs/Cart.svg"
+import Search from "../../assets/svgs/Search.svg"
 
 import './Header.modules.scss'
 
 const Header = () => {
   return (
     <section className="Header">
-      <div>
+      <div className="logo">
           <a href="/"><img src={Logo} alt="LogoM3" className="academylogo"/></a>
       </div>
       <div className="SearchBar">
         <input className="SearchInput" placeholder="Buscar..." />
+        <a href="/" className="searchLink"><img src={Search} alt="SearchButton" className="searchImg"/></a>
       </div>
-      <div>
+      <div className="LoginAndCart">
         <a href="/" className="loginlink">ENTRAR</a>
         <span>
         <a href="/"><img src={Cart} alt="CartIcon" /></a>
diff --git a/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss b/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss
new file mode 100644
index 0000000..b5f6ebc
--- /dev/null
+++ b/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss
@@ -0,0 +1,17 @@
+.headerBottom{
+    background-color: #000;
+    display: flex;
+}
+.headerUl{
+    display: flex;
+    flex-direction: row;
+    gap: 55px;
+}
+.headerItem{
+    color: #fff;
+    list-style-type: none;
+}
+.headerA{
+    color: #fff;
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/my-app/src/components/HeaderBottom/HeaderBottom.tsx b/my-app/src/components/HeaderBottom/HeaderBottom.tsx
new file mode 100644
index 0000000..2bd7975
--- /dev/null
+++ b/my-app/src/components/HeaderBottom/HeaderBottom.tsx
@@ -0,0 +1,17 @@
+import './HeaderBottom.modules.scss'
+
+const HeaderBottom = () => {
+    return (
+      <section className="headerBottom">
+        <div>
+            <ul className='headerUl'>
+                <li className='headerItem'><a href="/" className='headerA'>CURSOS</a></li>
+                <li className='headerItem'><a href="/" className='headerA'>SAIBA MAIS</a></li>
+                <li className='headerItem'><a href="/" className='headerA'>INSTITUCIONAIS</a></li>
+            </ul>
+        </div>
+      </section>
+    )
+  }
+
+  export {HeaderBottom}
\ No newline at end of file
diff --git a/my-app/src/pages/Home.tsx b/my-app/src/pages/Home.tsx
index 60ca414..63c8e64 100644
--- a/my-app/src/pages/Home.tsx
+++ b/my-app/src/pages/Home.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import {Header} from "../components/Header/Header"
+import{HeaderBottom} from "../components/HeaderBottom/HeaderBottom"
 
 function App() {
   return (
     <div className="App">
       <Header />
+      <HeaderBottom />
     </div>
   );
 }