From b3bd0b2c028982e097a5ae5fbc982bd9f4e15cbb Mon Sep 17 00:00:00 2001
From: WillSimao <williamsimaocavalcante75@gmail.com>
Date: Mon, 2 Jan 2023 11:05:12 -0300
Subject: [PATCH] feat(Header): Finaliza header desktop 1280px

---
 react-ts/src/components/Header/Header.scss    | 22 +++++++++++++++++-
 react-ts/src/components/Header/Header.tsx     | 15 ++++++++----
 .../src/components/UserAccount/UseAccount.tsx | 23 +++++++++++++++++++
 .../components/UserAccount/UserAccount.scss   | 21 +++++++++++++++++
 react-ts/src/styles/utils/Variables.scss      |  2 ++
 5 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 react-ts/src/components/UserAccount/UseAccount.tsx
 create mode 100644 react-ts/src/components/UserAccount/UserAccount.scss

diff --git a/react-ts/src/components/Header/Header.scss b/react-ts/src/components/Header/Header.scss
index 2d08338..64d649b 100644
--- a/react-ts/src/components/Header/Header.scss
+++ b/react-ts/src/components/Header/Header.scss
@@ -1,11 +1,31 @@
 @import '../../styles/utils/Variables.scss';
 
 .header {
-    padding: 22px 100px;
     background-color: $color-black1;
     &__wrapper-top {
+        padding: 22px 100px;
         display: flex;
         align-items: center;
         justify-content: space-between;
+        border-bottom: 1px solid $color-grey1;
+    }
+    &__wrapper-botom {
+        padding: 14px 100px;
+        &__ul {
+            display: flex;
+            align-items: center;
+            column-gap: 55px;
+            &__li {
+                a {
+                    font-family: $font-family;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 16px;
+                    color: $color-white1;
+                    text-transform: uppercase;
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/react-ts/src/components/Header/Header.tsx b/react-ts/src/components/Header/Header.tsx
index 1864a24..500ccf5 100644
--- a/react-ts/src/components/Header/Header.tsx
+++ b/react-ts/src/components/Header/Header.tsx
@@ -1,6 +1,7 @@
 import './Header.scss';
 
 import InputSearch from '../InputSearch/InputSearch';
+import UserAccount from '../UserAccount/UseAccount';
 import logoM3  from '../../assets/images/logo-m3academy.svg';
 
 const Header = () => {
@@ -13,17 +14,21 @@ const Header = () => {
                     </a>
                 </picture>      
                 <InputSearch/>
+                <UserAccount/>
             </div>
-            {/* <div className='header__wrapper-botom'>
-                <ul className='header__wrapper-top__ul'>
-                    <li className='header__wrapper-top__ul__li'>
+            <div className='header__wrapper-botom'>
+                <ul className='header__wrapper-botom__ul'>
+                    <li className='header__wrapper-botom__ul__li'>
                             <a href="/">cursos</a>
                     </li>
-                    <li className='header__wrapper-top__ul__li'>
+                    <li className='header__wrapper-botom__ul__li'>
                             <a href="/">saiba mais</a>
                     </li>
+                    <li className='header__wrapper-botom__ul__li'>
+                            <a href="/">institucionais</a>
+                    </li>
                 </ul>
-            </div> */}
+            </div>
         </header>
     )
 }
diff --git a/react-ts/src/components/UserAccount/UseAccount.tsx b/react-ts/src/components/UserAccount/UseAccount.tsx
new file mode 100644
index 0000000..cdbb1bf
--- /dev/null
+++ b/react-ts/src/components/UserAccount/UseAccount.tsx
@@ -0,0 +1,23 @@
+import './UserAccount.scss';
+
+import CartHeader from '../../assets/images/cart-header.svg';
+
+const UserAccount = () => {
+    return (
+        <div className='wrapper-userAccount'>
+            <ul className='wrapper-userAccount__ul' >
+                <li className='wrapper-userAccount__ul__li-entrar'>
+                    <a href="/">entrar</a>
+                </li>
+                <li className='wrapper-userAccount__ul__li-cart'>
+                    <a href="/">
+                    <img src={CartHeader} alt="Carrinho de Compras" />
+                    </a>
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+
+export default UserAccount;
\ No newline at end of file
diff --git a/react-ts/src/components/UserAccount/UserAccount.scss b/react-ts/src/components/UserAccount/UserAccount.scss
new file mode 100644
index 0000000..3412ff8
--- /dev/null
+++ b/react-ts/src/components/UserAccount/UserAccount.scss
@@ -0,0 +1,21 @@
+@import '../../styles/utils/Variables.scss';
+
+
+.wrapper-userAccount {
+    &__ul {
+        display: flex;
+        column-gap: 55px;
+        align-items: center;
+        &__li-entrar {
+            a {
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 16px;
+                color: $color-white1;
+                text-transform: uppercase;
+            }
+        }
+    }
+}
diff --git a/react-ts/src/styles/utils/Variables.scss b/react-ts/src/styles/utils/Variables.scss
index e0a0b7f..208080c 100644
--- a/react-ts/src/styles/utils/Variables.scss
+++ b/react-ts/src/styles/utils/Variables.scss
@@ -1,6 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap');
 
 // colors
+$color-white1: #ffffff;
+
 $color-red1: #ff0000;
 
 $color-grey1: #c4c4c4;