ueberjames/desafio-react-e-typescript-ueber-james
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refatoração do code para melhora performaçe

Browse Source
This commit is contained in:
Ueber James Santos 2023-01-05 16:28:15 -03:00
parent 5c15f3f735
commit bcdaed8114
15 changed files with 464 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
desafio-5/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" />

3
desafio-5/src/assets/icones/Vectorbuscaicon.svg Normal file
View File

@ -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.6187C14.0951 10.4091 14.6249 8.92334 14.6249 7.31267C14.6249 3.2807 11.3444 0.000183105 7.31245 0.000183105C3.28048 0.000183105 0 3.2807 0 7.31267C0 11.3446 3.28052 14.6252 7.31248 14.6252C8.92315 14.6252 10.409 14.0953 11.6186 13.2095L16.4092 18.0001L18 16.4093C18 16.4092 13.2094 11.6187 13.2094 11.6187ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1043 2.25001 7.31267C2.25001 4.52104 4.52086 2.25019 7.31248 2.25019C10.1041 2.25019 12.375 4.52104 12.375 7.31267C12.375 10.1043 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 655 B

12
desafio-5/src/assets/icones/shoppingCart-icon.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3715_4730)">
<path d="M27.823 4.07236C27.6697 3.88079 27.4377 3.76928 27.1923 3.76928H5.69581L5.09469 1.16451C5.01009 0.798054 4.68377 0.538452 4.30768 0.538452H0.80768C0.361648 0.538452 0 0.9001 0 1.34619C0 1.79227 0.361648 2.15387 0.80768 2.15387H3.66516L7.7455 19.8355C7.83005 20.2019 8.15642 20.4615 8.53251 20.4615H24.7154C25.1614 20.4615 25.523 20.0999 25.523 19.6539C25.523 19.2078 25.1614 18.8462 24.7154 18.8462H9.17509L8.55384 16.1539H24.7693C25.1471 16.1539 25.4744 15.892 25.5573 15.5235L27.9803 4.75426C28.0342 4.51483 27.9763 4.26398 27.823 4.07236Z" fill="white"/>
<path d="M11.8461 21.5385C10.2132 21.5385 8.88458 22.867 8.88458 24.5C8.88458 26.133 10.2131 27.4615 11.8461 27.4615C13.4791 27.4615 14.8077 26.133 14.8077 24.5C14.8077 22.867 13.4792 21.5385 11.8461 21.5385Z" fill="white"/>
<path d="M21.5385 21.5385C19.9055 21.5385 18.5769 22.867 18.5769 24.5C18.5769 26.133 19.9054 27.4615 21.5385 27.4615C23.1714 27.4615 24.5 26.133 24.5 24.5C24.5 22.867 23.1715 21.5385 21.5385 21.5385Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3715_4730">
<rect width="28" height="28" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

8
desafio-5/src/assets/logos/Logo-M3Academy 1m3academy-header.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

31
desafio-5/src/components/Header/BuscaMenu.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from "react";
import style from "../../styles/header/inputMenuHeader.module.scss"
import buscaIcon from "../../assets/icones/Vectorbuscaicon.svg";
interface IView{
view: string
}
const BuscaMenu = ({view}: IView) => {
return (
<div
className={`${style["input-search"]} ${style[`input-search--${view}`]}`}
>
<input
className={style["inputHeader"]}
type="text"
name="Buscar"
id="Buscar"
placeholder="Buscar..."
/>
<img
className={style["icon-input"]}
src={buscaIcon}
alt="Icon de busca"
/>
</div>
);
};
export { BuscaMenu };

34
desafio-5/src/components/Header/SubMenu.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import style from "../../styles/header/submenu.module.scss";
const Submenu = () => {
return (
<div className={style["submenu"]}>
<div className={style["container"]}>
<div
className={`${style["submenu-links"]} ${style["submenu-links--desktop"]}`}
>
<a className={style["submenu-link"]} href="#">
CURSOS
</a>
<a className={style["submenu-link"]} href="#">
SAIBA MAIS
</a>
<a className={style["submenu-link"]} href="#">
institucional
</a>
</div>
</div>
</div>
);
};
export { Submenu };

24
desafio-5/src/components/Header/header.tsx
View File

@ -0,0 +1,24 @@
import React from "react";
import style from "../../styles/header/header.module.scss";
import logo from "../../assets/logos/logo-m3Academy.svg";
import { MenuHeader } from "./menuHeader";
import { Submenu } from "./SubMenu"
const Header = () => {
return (
<header className={style["header"]}>
<MenuHeader />
< Submenu />
</header>
)
}
export { Header };

33
desafio-5/src/components/Header/menuHeader.tsx Normal file
View File

@ -0,0 +1,33 @@
import React, { useContext } from "react";
import style from "../../styles/header/headermenu.module.scss";
import logo from "../../assets/logos/Logo-M3Academy 1m3academy-header.svg";
import CartIcon from "../../assets/icones/shoppingCart-icon.svg";
import { BuscaMenu } from "./BuscaMenu";
const MenuHeader = () => {
return (
<div className={style["container"]}>
<div className={style["menu"]}>
<a href="#" className={style["logo"]}>
<img src={logo} alt="Logo M3" />
</a>
< BuscaMenu view="desktop" />
<div className={style["header-links"]}>
<a className={style["login"]} href="#">
ENTRAR
</a>
<button className={style["cart"]}>
<img src={CartIcon} alt="Logo M3" />
</button>
</div>
</div>
<BuscaMenu view="mobile" />
</div>
);
}
export { MenuHeader };

5
desafio-5/src/index.tsx
View File

@ -1,9 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import "./styles/reset.scss"
// import ReactDOM from 'react-dom/client';
import './global.scss';
import Home from './pages/Home';
import {Home} from './pages/Home';
ReactDOM.render( <Home />, document.getElementById('root'));

15
desafio-5/src/pages/Home.tsx
View File

@ -1,7 +1,16 @@
import React from "react";
import React from "react";
import { Header } from "../components/Header/Header";
const Home = () => {
return <h2>oi</h2>;
return (
<div>
< Header />
</div>
);
};
export default Home;
export { Home };

13
desafio-5/src/styles/header/header.module.scss
View File

@ -1,4 +1,9 @@
.page-header {
background-color: var(--black-600);
padding-top: 18px;
}
.header {
background-color: var(--black-600);
padding-top: 22px ;
}
@media screen and (max-width: 768px) {
.header{
padding: 30px 0 16px;
}
}

95
desafio-5/src/styles/header/headermenu.module.scss Normal file
View File

@ -0,0 +1,95 @@
.container {
padding: 0 100px 0 100px;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-menu {
display: none;
}
.header-links {
display: flex;
align-items: center;
}
.login {
font-family: var(--roboto);
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
text-decoration: none;
color: var(--whiet-100);
transition: color .2s linear;
}
.cart {
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
margin-left: 40px;
}
.cart img {
transition: fill .2s linear;
}
//midia
@media screen and (min-width: 2500px) {
.logo {
img {
width: 265.62px;
}
}
.login {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
.cart img {
width: 54.68px;
}
}
@media screen and (max-width: 1024px) {
.container {
padding: 0 16px 25px 16px;
}
.icon-menu {
display: block;
cursor: pointer;
}
.login {
display: none;
}
.cart {
margin-left: 0;
}
}

77
desafio-5/src/styles/header/inputMenuHeader.module.scss Normal file
View File

@ -0,0 +1,77 @@
.input-search {
position: relative;
display: flex;
align-items: center;
}
.inputHeader {
width: 264px;
border: 2px solid #f0f0f0;
border-radius: 5px;
outline: 0;
padding: 8px 32px 8px 12px;
transition: border .2s linear;
}
.inputHeader:focus {
border-color: var(--black-300);
}
.input::placeholder {
font-family: var(--roboto);
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--gray-400);
}
.icon-input {
position: absolute;
right: 12px;
cursor: pointer;
}
.input-search--mobile {
display: none;
}
//midia
@media screen and (min-width: 2500px) {
.inputHeader {
width: 515.62px;
height: 57px;
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
.icon-input {
width: 35.15px;
}
}
@media screen and (max-width: 1024px) {
.input-search--desktop {
display: none;
}
.input-search--mobile {
display: flex;
margin-top: 32px;
}
.input-search--mobile .inputHeader {
width: 100%;
}
}

125
desafio-5/src/styles/header/submenu.module.scss Normal file
View File

@ -0,0 +1,125 @@
.submenu {
margin-top: 22px;
padding: 14px 0;
border-top: 1px solid var(--gray-400);
}
.container {
padding: 0 0px 0 100px;
}
.submenu-links {
display: flex;
}
.submenu-links--desktop {
max-width: 349px;
width: 100%;
justify-content: space-between;
}
.submenu-link {
font-family: var(--roboto);
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
text-decoration: none;
transition: color .2s linear;
}
.submenu-links--desktop .submenu-link {
color: var( --whiet-100);
}
.submenu-links--mobile {
position: absolute;
z-index: 5;
top: 0;
width: 66%;
height: 100%;
background-color: #fff;
flex-direction: column;
transform: translateX(-100%);
transition: all .2s .1s linear;
}
.submenu-links .submenu-link:hover {
color: var(--black-300);
}
.submenu--absolute {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
z-index: 2;
background-color: rgba(0, 0, 0, .8);
transition: all .2s linear;
}
//midia
@media screen and (min-width: 2500px) {
.submenu-links--desktop {
max-width: 568.62px;
}
.submenu-link{
font-weight: 500;
font-size: 28px;
line-height: 3
}
}
@media screen and (max-width: 1024px) {
.submenu {
border-top: none;
margin-top: 0;
padding: 0;
}
.submenu-links--desktop {
display: none;
}
.submenu-links--mobile .submenu-link {
width: 100%;
padding: 10px 0;
text-align: center;
color: var(--blue-500);
border-bottom: 1px solid var(--blue-500);
}
.submenu--absolute.is-open {
opacity: 1;
visibility: visible;
}
.submenu-links--mobile.is-open {
transform: translateX(0);
}
}

1
desafio-5/src/styles/variables.scss
View File

@ -8,6 +8,7 @@
--black-500: #110D0F;
--black-600: #000000;
--whiet-100: #ffffff;
--gray-200: #E7E7E7;
--gray-300: #E5E5E5;