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

develop #7

Merged
cainamilech merged 46 commits from develop into main 2023-01-12 14:40:36 +00:00
Conversation 0 Commits 46 Files Changed 88 +234 -159
15 changed files with 234 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3a94c2af7b - Show all commits

63
react-project/src/assets/styles/global.scss
View File

@ -4,66 +4,3 @@
margin: 0;
font-family: var(--font-roboto);
}
.divhamb {
position: relative;
border: 1px solid red;
/*width: 50px;
height: 50px;*/
}
.fundo {
background-color: blue;
border: 10px solid yellow;
}
.modal-content {
position: absolute;
background-color: var(--white);
border: 1px solid green;
width: 97.4609%;
height: 585px;
.modal-top {
display: flex;
justify-content: space-between;
padding: 31px 16px;
background-color: var(--black);
a {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--white);
text-decoration: none;
}
button {
background: none;
border: 0;
display: contents;
cursor: pointer;
img {
width: 15px;
height: 15px;
}
}
}
ul {
padding: 31px 16px;
list-style: none;
li {
margin-bottom: 12px;
a {
color: var(--gray-100);
text-decoration: none;
font-weight: 500;
font-size: 14px;
line-height: 16px;
}
}
}
}

13
react-project/src/components/Header/Cart.tsx Normal file
View File

@ -0,0 +1,13 @@
import cart from "./assets/svgs/cart.svg";
const Cart = () => {
return (
<a href="/">
<figure>
<img src={cart} alt="Carrinho de compras" />
</figure>
</a>
);
};
export { Cart };

21
react-project/src/components/Header/MenuHamburguer.tsx → react-project/src/components/Header/Hamburguer.tsx
View File

@ -1,24 +1,29 @@
import { useState } from "react";
import Modal from "react-modal";
import hamburguer from "./assets/modules/Hamburguer.module.scss";
import hamb from "./assets/svgs/hamburguer.svg";
import close from "./assets/svgs/close.svg";
const MenuHamburguer = () => {
const Hamburguer = () => {
const [hambActive, setHamb] = useState(false);
const HambMode = () => {
setHamb(!hambActive);
};
return (
<div className="divhamb">
<button onClick={HambMode}>abrir modal</button>
<>
<button className={hamburguer["hamburguer"]} onClick={HambMode}>
<img src={hamb} alt="Menu Hamburguer" />
</button>
<Modal
isOpen={hambActive}
onRequestClose={HambMode}
overLayClassName="fundo"
className="modal-content"
overlayClassName={hamburguer["overlay"]}
className={hamburguer["content"]}
>
<div className="modal-top">
<div className={hamburguer["content__top"]}>
<a href="/">ENTRAR</a>
<button onClick={HambMode}>
<img src={close} alt="Botão de fechar menu" />
@ -37,8 +42,8 @@ const MenuHamburguer = () => {
</li>
</ul>
</Modal>
</div>
</>
);
};
export { MenuHamburguer };
export { Hamburguer };

49
react-project/src/components/Header/Header.tsx
View File

@ -1,54 +1,23 @@
import header from "./assets/modules/Header.module.scss";
import { Formik, Form, Field, ErrorMessage } from "formik";
//IMAGES
import logo from "./assets/svgs/logo.svg";
import search from "./assets/svgs/search.svg";
import cart from "./assets/svgs/cart.svg";
import { MenuHamburguer } from "./MenuHamburguer";
interface ISearchType {
search: string;
}
import { Logo } from "./Logo";
import { SearchInput } from "./SearchInput";
import { Cart } from "./Cart";
const Header = () => {
return (
<header>
<div className={header["header-desktop"]}>
<div className={header["spread"]}>
<div className={header["header"]}>
<a href="/">
<figure>
<img src={logo} alt="Logo M3 Academy" />
</figure>
</a>
<Logo />
<div className={header["header__search"]}>
<Formik
onSubmit={(values: ISearchType, actions) => {
actions.resetForm();
}}
initialValues={{ search: "" }}
>
<Form>
<Field placeholder="Buscar..." id="search" name="search" />
<button type="submit">
<img src={search} alt="Icone de pesquisa" />
</button>
</Form>
</Formik>
</div>
<SearchInput />
<div className={header["header__account"]}>
<a className={header["header__account__login"]} href="/">
ENTRAR
</a>
<a href="/">
<figure>
<img src={cart} alt="Carrinho de compras" />
</figure>
</a>
<Cart />
</div>
</div>
</div>
@ -66,9 +35,7 @@ const Header = () => {
</li>
</ul>
</nav>
<MenuHamburguer />
</header>
</div>
);
};

23
react-project/src/components/Header/HeaderMobile.tsx Normal file
View File

@ -0,0 +1,23 @@
import headerMobile from "./assets/modules/HeaderMobile.module.scss";
import { Hamburguer } from "./Hamburguer";
import { Logo } from "./Logo";
import { Cart } from "./Cart";
import { SearchInput } from "./SearchInput";
const HeaderMobile = () => {
return (
<div className={headerMobile["header-mobile"]}>
<div className={headerMobile["header-mobile__header"]}>
<Hamburguer />
<Logo />
<Cart />
</div>
<div className={headerMobile["header-mobile__input"]}>
<SearchInput />
</div>
</div>
);
};
export { HeaderMobile };

13
react-project/src/components/Header/Logo.tsx Normal file
View File

@ -0,0 +1,13 @@
import logo from "./assets/svgs/logo.svg";
const Logo = () => {
return (
<a href="/">
<figure>
<img src={logo} alt="Logo M3 Academy" />
</figure>
</a>
);
};
export { Logo };

13
react-project/src/components/Header/Menu.tsx
View File

@ -1,13 +0,0 @@
import menu from "./assets/modules/Menu.module.scss";
const Menu = () => {
return (
<div>
<a href="/">CURSOS</a>
<a href="/">SAIBA MAIS</a>
<a href="/">INSTITUCIONAIS</a>
</div>
);
};
export { Menu };

30
react-project/src/components/Header/SearchInput.tsx Normal file
View File

@ -0,0 +1,30 @@
import search from "./assets/svgs/search.svg";
import searchStyle from "./assets/modules/SearchInput.module.scss";
import { Formik, Form, Field, ErrorMessage } from "formik";
interface ISearchType {
search: string;
}
const SearchInput = () => {
return (
<div className={searchStyle["search"]}>
<Formik
onSubmit={(values: ISearchType, actions) => {
actions.resetForm();
}}
initialValues={{ search: "" }}
>
<Form>
<Field placeholder="Buscar..." id="search" name="search" />
<button type="submit">
<img src={search} alt="Icone de pesquisa" />
</button>
</Form>
</Formik>
</div>
);
};
export { SearchInput };

0
react-project/src/components/Header/assets/modules/Hambuguer.module.scss
View File

68
react-project/src/components/Header/assets/modules/Hamburguer.module.scss Normal file
View File

@ -0,0 +1,68 @@
.hamburguer {
display: contents;
cursor: pointer;
img {
width: 28px;
height: 22.5px;
}
}
.content {
position: absolute;
background-color: var(--white);
width: 97.4609%;
height: 585px;
&__top {
display: flex;
justify-content: space-between;
padding: 31px 16px;
background-color: var(--black);
a {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--white);
text-decoration: none;
}
button {
background: none;
border: 0;
display: contents;
cursor: pointer;
img {
width: 15px;
height: 15px;
}
}
}
ul {
padding: 31px 16px;
list-style: none;
li {
margin-bottom: 12px;
a {
color: var(--gray-100);
text-decoration: none;
font-weight: 500;
font-size: 14px;
line-height: 16px;
}
}
}
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(69, 69, 69, 0.7);
}

38
react-project/src/components/Header/assets/modules/Header.module.scss
View File

@ -1,9 +1,13 @@
header {
.header-desktop {
background-color: var(--black);
display: flex;
flex-direction: column;
color: var(--white);
@media screen and (max-width: 1024px) {
display: none;
}
.spread {
border-bottom: 1px solid var(--gray-100);
}
@ -24,38 +28,6 @@ header {
}
}
&__search {
form {
position: relative;
input {
padding: 8px 44px 8px 16px;
background-color: var(--white);
border: 2px solid var(--gray-500);
border-radius: 5px;
color: var(--gray-600);
font-weight: 400;
font-size: 14px;
line-height: 16px;
width: 264px;
height: 32px;
&::placeholder {
color: var(--gray-600);
}
}
button {
position: absolute;
top: 6px;
right: 16px;
border: 0;
background-color: var(--white);
cursor: pointer;
}
}
}
&__account {
display: flex;
align-items: center;

21
react-project/src/components/Header/assets/modules/HeaderMobile.module.scss Normal file
View File

@ -0,0 +1,21 @@
.header-mobile {
background-color: var(--black);
display: flex;
flex-direction: column;
color: var(--white);
@media screen and (min-width: 1025px) {
display: none;
}
&__header {
display: flex;
justify-content: space-between;
padding: 16px 25px;
align-items: center;
}
&__input {
padding: 0 25px 25px;
}
}

0
react-project/src/components/Header/assets/modules/Menu.module.scss
View File

35
react-project/src/components/Header/assets/modules/SearchInput.module.scss Normal file
View File

@ -0,0 +1,35 @@
.search {
form {
position: relative;
input {
padding: 8px 44px 8px 16px;
background-color: var(--white);
border: 2px solid var(--gray-500);
border-radius: 5px;
color: var(--gray-600);
font-weight: 400;
font-size: 14px;
line-height: 16px;
width: 264px;
height: 32px;
@media screen and (max-width: 1024px) {
width: 100%;
}
&::placeholder {
color: var(--gray-600);
}
}
button {
position: absolute;
top: 6px;
right: 16px;
border: 0;
background-color: var(--white);
cursor: pointer;
}
}
}

6
react-project/src/pages/Institucional.tsx
View File

@ -1,13 +1,17 @@
import "../assets/styles/variables.scss";
import { Header } from "../components/Header/Header";
import { HeaderMobile } from "../components/Header/HeaderMobile";
import { Main } from "../components/MainInstitucional/Main";
import { Footer } from "../components/Footer/Footer";
const Institucional = () => {
return (
<div>
<Header />
<header>
<Header />
<HeaderMobile />
</header>
<Main />
<Footer />
</div>