WilliamSimao/desafio-react-e-typescript-WilliamSimao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Header): Finaliza header desktop 1280px

Browse Source
This commit is contained in:
William Simão Cavalcante 2023-01-02 11:05:12 -03:00
parent 88cb9e66c3
commit b3bd0b2c02
5 changed files with 77 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
react-ts/src/components/Header/Header.scss
View File

@ -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;
}
}
}
}
}

15
react-ts/src/components/Header/Header.tsx
View File

@ -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>
)
}

23
react-ts/src/components/UserAccount/UseAccount.tsx Normal file
View File

@ -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;

21
react-ts/src/components/UserAccount/UserAccount.scss Normal file
View File

@ -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;
}
}
}
}

2
react-ts/src/styles/utils/Variables.scss
View File

@ -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;