EleonoraOtz/desafio-react-e-typescript-eleonora-otz
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria o header desktop

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2023-01-03 10:11:24 -03:00
parent 39841df5e1
commit 9380433d40
11 changed files with 280 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

2
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

4
src/assets/svgs/close.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

5
src/assets/svgs/menu.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 688 B

56
src/components/header/index.tsx
View File

@ -1,7 +1,55 @@
import React from "react";
const Header = () => {
return <div></div>
}
import logom3Academy from "../../assets/imgs/Logo-M3Academy.png";
import styles from "../header/style.module.scss";
import Search from "../../assets/svgs/search.svg";
import miniCart from "../../assets/svgs/minicart.svg";
import BurgerMenu from "../../assets/svgs/menu.svg"
export { Header };
const Header = () => {
return (
<div>
<div className={styles["header-top"]}>
<div className={styles["header-top__wrapper"]}>
<a className={styles["header-top__logo"]} href="/">
<img
src={logom3Academy}
alt="Logo M3 Academy"
/>
</a>
<div className={styles["header-top__search-box"]}>
<input className="search-box-text" type="text" placeholder="Buscar..." />
<button className={styles["search-button"]}>
<img src={Search} alt="" />
</button>
</div>
<div className={styles["header-top__user-info"]}>
<a href="./">
<h2>Entrar</h2>
</a>
<a href="./">
<figure className={styles["mini-cart"]}>
<img src={miniCart} alt="Meu carrinho" />
</figure>
</a>
</div>
</div>
</div>
<div className={styles["header-bottom"]}>
<nav className={styles["nav-menu"]} >
<button className={styles["burger-menu"]}>
<img src={BurgerMenu} alt="Menu" />
</button>
<ul className={styles["menu-list"]}>
<li className={styles["first-li"]}>Cursos</li>
<li className={styles["second-li"]}>Saiba mais</li>
<li className={styles["third-li"]}>Institucionais</li>
</ul>
</nav>
</div>
</div>
);
};
export { Header };

187
src/components/header/style.module.scss
View File

@ -0,0 +1,187 @@
.header-top {
width: 100%;
background: var(--black);
border-bottom: 1px solid var(--light-gray-500);
&__wrapper {
width: 84.38%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
@media (min-width:2500px) {
width: 92%;
}
}
@media (max-width: 1024px) {
border: none;
}
&__logo {
width: 12.6%;
img {
width: 100%;
margin: auto;
}
}
// Caixa de pesquisa
&__search-box {
position: relative;
input {
width: 204px;
background-color: var(--white);
border: 2px solid var(--light-gray-300);
border-radius: 5px;
margin: 22px 0;
padding: 6px 44px 6px 16px;
font-weight: 400;
font-size: 14px;
line-height: 16.41px;
outline: none;
&::placeholder {
color: var(--light-gray-600);
}
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
padding: 12px 291px 12px 16px;
}
}
.search-button {
position: absolute;
right: 16px;
background-color: transparent;
border: 0;
padding: 0;
width: 6.72%;
top: 28px;
img {
width: 100%;
margin: 0;
}
@media (min-width: 2500px) {
right: 16px;
top: 34px;
}
}
}
// Links de página do usuário e carrinho
&__user-info {
display: flex;
align-items: center;
gap: 55px;
// margin: 0 100px 0 0;
a {
text-decoration: none;
h2 {
// margin: 0 55px 0 0;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: var(--white);
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
}
.mini-cart {
margin: 0;
img {
width: 28px;
@media (min-width: 2500px) {
width: 54.68px;
}
}
}
}
}
// Menu do header
.header-bottom {
background: var(--black);
.nav-menu {
width: 84.38%;
margin: auto;
@media (min-width:2500px) {
width: 92%;
}
.burger-menu {
display: none;
@media (max-width: 1024px) {
display: block;
background: transparent;
border: none;
}
}
ul {
display: flex;
align-items: center;
text-decoration: none;
margin: 0;
padding: 0;
@media (max-width: 1024px) {
display: none;
}
li {
font-weight: 500;
font-size: 14px;
line-height: 16px;
// padding: 14px 27.5px;
text-transform: uppercase;
list-style: none;
color: var(--white);
cursor: pointer;
// &:hover {
// color: var(--blue);
// }
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
.first-li {
padding: 14px 27.5px 14px 0;
}
.second-li,
.third-li {
padding: 14px 27.5px;
}
}
}
}

37
src/global.scss
View File

@ -1,28 +1,33 @@
// Fonts
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
$font-family: "Roboto", sans-serif;
// Colors
:root {
--white: #ffffff;
$white: #ffffff;
--light-gray-100: #f9f9f9;
--light-gray-200: #f0f0f0;
--light-gray-300: #f2f2f2;
--light-gray-400: #e5e5e5;
--light-gray-500: #c4c4c4;
--light-gray-600: #c6c6c6;
$gray-100: #F9F9F9;
$gray-200: #F0F0F0;
$gray-300: #E5E5E5;
$gray-400: #C4C4C4;
$gray-500: #B9B7B7;
$gray-600: #7D7D7D;
$gray-700: #303030;
$gray-800: #292929;
$gray-900: #100D0E;
--medium-gray-100: #b9b7b7;
--medium-gray-200: #7d7d7d;
$black: #000000;
--dark-gray-100: #303030;
--dark-gray-200: #292929;
--dark-gray-300: #100d0e;
$red: #FF0000;
$green: #008000;
$blue: #00C8FF;
--black: #000000;
--red: #ff0000;
--green: #008000;
--blue: #00c8ff;
}
body {
margin: 0;
@ -32,6 +37,6 @@ body {
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

2
src/index.tsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './global.scss';
import {Institucional} from "./pages/Institucional";
const root = ReactDOM.createRoot(

11
src/pages/Institucional.tsx
View File

@ -1,7 +1,12 @@
import React from "react";
import { Header } from "../components/header";
const Institucional = () => {
return <div></div>
}
return (
<div>
<Header />
</div>
);
};
export { Institucional };
export { Institucional };