anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #2

Merged
anacarolinaduartecavalcante merged 81 commits from develop into main 2023-01-14 14:05:45 +00:00
Conversation 0 Commits 81 Files Changed 59 +59 -44
4 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7c02455aa7 - Show all commits

58
src/components/Header.module.scss
View File

@ -9,7 +9,7 @@ header {
}
//Header Content Top
.header__content--top {
.Header__Top {
display: flex;
justify-content: space-between;
align-items: center;
@ -22,7 +22,29 @@ header {
width: 92.002%;
height: 101px;
}
.list {
.Logo {
width: 12.589%;
height: 25.86px;
list-style: none;
display: flex;
@media (min-width: 2500px) {
width: 11.545%;
height: 50.5px;
}
& a {
display: flex;
width: 100%;
height: 100%;
& img {
width: 100%;
height: 25.86px;
@media (min-width: 2500px) {
height: 50.5px;
}
}
}
}
.Menu__Header__Top {
display: flex;
justify-content: space-between;
align-items: center;
@ -31,7 +53,7 @@ header {
@media (min-width: 2500px) {
width: 9.331%;
}
&__item {
& .List {
display: flex;
align-items: center;
list-style: none;
@ -63,30 +85,10 @@ header {
}
}
}
&__item--logo {
width: 12.589%;
height: 25.86px;
list-style: none;
display: flex;
@media (min-width: 2500px) {
width: 11.545%;
height: 50.5px;
}
& a {
display: flex;
& img {
width: 100%;
height: 25.86px;
@media (min-width: 2500px) {
height: 50.5px;
}
}
}
}
}
}
.input__header {
.Search__Bar {
width: 200.04px;
height: 12.04px;
background: $white;
@ -97,8 +99,12 @@ header {
background-repeat: no-repeat;
background-position: bottom 50% right 16px;
background-size: 18px;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $primary-500;
@media (min-width: 2500px) {
width: 435.19px;
height: 31.18px;
@ -123,7 +129,7 @@ header {
}
//Header Content Bottom
.nav__content {
.Header__Bottom {
border-top: 1px solid $primary-600;
width: auto;
height: 43.01px;
@ -132,7 +138,7 @@ header {
@media (min-width: 2500px) {
height: 60.01px;
}
.header__content--bottom {
.Nav__Bar {
padding-left: 0;
width: 84.378%;
display: flex;

14
src/components/Header.tsx
View File

@ -4,13 +4,13 @@ import { HeaderContentBottom } from "./HeaderContentBottom";
const Header = () => {
return (
<header>
<ul className={styles["header__content--top"]}>
<HeaderContentTop/>
</ul>
<nav className={styles["nav__content"]}>
<HeaderContentBottom/>
</nav>
<header>
<ul className={styles["Header__Top"]}>
<HeaderContentTop />
</ul>
<nav className={styles["Header__Bottom"]}>
<HeaderContentBottom />
</nav>
</header>
);
};

2
src/components/HeaderContentBottom.tsx
View File

@ -3,7 +3,7 @@ import styles from "./Header.module.scss";
const HeaderContentBottom = () => {
return (
<>
<ul className={styles["header__content--bottom"]}>
<ul className={styles["Nav__Bar"]}>
<li>
<a href="/">Cursos</a>
</li>

29
src/components/HeaderContentTop.tsx
View File

@ -1,27 +1,36 @@
import React from 'react';
import React from "react";
import styles from "./Header.module.scss";
import Logo from "../assets/imgs/logom3.svg";
import Cart from "../assets/imgs/cart.svg";
const HeaderContentTop = () => {
const [search, setSearch]: [string, (search: string) => void] = React.useState("");
const [search, setSearch]: [string, (search: string) => void] =
React.useState("");
return (
<>
<li className={styles["list__item--logo"]}>
<li className={styles["Logo"]}>
<a href="/">
<img src={Logo} alt="logo M3"/>
<img src={Logo} alt="logo M3" />
</a>
</li>
<li className={styles["list__item"]}>
<input className={styles["input__header"]} type="text" placeholder="Buscar..." value={search} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}></input>
<li className={styles["List"]}>
<input
className={styles["Search__Bar"]}
type="text"
placeholder="Buscar..."
value={search}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSearch(e.target.value)
}
></input>
</li>
<ul className={styles["list"]}>
<li className={styles["list__item"]}>
<ul className={styles["Menu__Header__Top"]}>
<li className={styles["List"]}>
<a href="/">Entrar</a>
</li>
<li className={styles["list__item"]}>
<li className={styles["List"]}>
<a href="/" className={styles["cart__content--link"]}>
<img src={Cart} alt="ícone de carrinho"/>
<img src={Cart} alt="ícone de carrinho" />
</a>
</li>
</ul>