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

feature/desafio-react-e-typescript #1

Merged
FilipeQuintanilha merged 12 commits from feature/desafio-react-e-typescript into main 2023-01-19 19:05:24 +00:00
Conversation 0 Commits 12 Files Changed 59 +375 -3
10 changed files with 375 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d5261c9e14 - Show all commits

61
package-lock.json generated
View File

@ -18,6 +18,7 @@
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
"typescript": "^4.9.4",
@ -3077,6 +3078,14 @@
}
}
},
"node_modules/@remix-run/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
"engines": {
"node": ">=14"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -14023,6 +14032,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
"dependencies": {
"@remix-run/router": "1.2.1"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
"dependencies": {
"@remix-run/router": "1.2.1",
"react-router": "6.6.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@ -18958,6 +18997,11 @@
"source-map": "^0.7.3"
}
},
"@remix-run/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
},
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -26769,6 +26813,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
"requires": {
"@remix-run/router": "1.2.1"
}
},
"react-router-dom": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
"requires": {
"@remix-run/router": "1.2.1",
"react-router": "6.6.2"
}
},
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

1
package.json
View File

@ -13,6 +13,7 @@
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
"typescript": "^4.9.4",

37
src/components/Conteudo.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import styles from "../styles/main.module.scss";
import { Menu } from "./Menu";
import { Sobre } from "./Routes/Sobre";
const Conteudo = () => {
return (
<div className={styles["main-wrapper__conteudo"]}>
<div className={styles["principal"]}>
<Router>
<Menu />
<Routes>
<Route path="/" element={<Sobre titulo="Sobre" />} />
<Route path="/sobre" element={<Sobre titulo="Sobre" />} />
<Route
path="/pagamento"
element={<Sobre titulo="Forma de Pagamento" />}
/>
<Route path="/entrega" element={<Sobre titulo="Entrega" />} />
<Route
path="/troca"
element={<Sobre titulo="Troca e Devolução" />}
/>
<Route
path="/seguranca"
element={<Sobre titulo="Segurança e Privacidade" />}
/>
</Routes>
</Router>
</div>
</div>
);
};
export { Conteudo };

2
src/components/Main.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import styles from "../styles/main.module.scss";
import { Caminho } from "./Caminho";
import { Conteudo } from "./Conteudo";
import { Newsletter } from "./Newsletter";
import { ScrollPage } from "./ScrollPage";
import { Titulo } from "./Titulo";
@ -12,6 +13,7 @@ const Main = () => {
<div className={styles["main-wrapper"]}>
<Caminho />
<Titulo />
<Conteudo />
<Newsletter />
<ScrollPage />
</div>

69
src/components/Menu.tsx Normal file
View File

@ -0,0 +1,69 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import styles from "../styles/main.module.scss";
const Menu = () => {
const [routePosition, setPosition] = useState(1);
return (
<div className={styles["conteudo-menu"]}>
<ul className={styles["menu"]}>
<Link to="/" onClick={() => setPosition(1)}>
<li
className={`${styles["menu__item"]} ${
styles[`${routePosition === 1 && "menu__item-ativo"}`]
}`}
>
Sobre
</li>
</Link>
<Link to="/pagamento" onClick={() => setPosition(2)}>
<li
className={`${styles["menu__item"]} ${
styles[`${routePosition === 2 && "menu__item-ativo"}`]
}`}
>
Forma De Pagamento
</li>
</Link>
<Link to="/entrega" onClick={() => setPosition(3)}>
<li
className={`${styles["menu__item"]} ${
styles[`${routePosition === 3 && "menu__item-ativo"}`]
}`}
>
Entrega
</li>
</Link>
<Link to="/troca" onClick={() => setPosition(4)}>
<li
className={`${styles["menu__item"]} ${
styles[`${routePosition === 4 && "menu__item-ativo"}`]
}`}
>
Troca e Devolução
</li>
</Link>
<Link to="/seguranca" onClick={() => setPosition(5)}>
<li
className={`${styles["menu__item"]} ${
styles[`${routePosition === 5 && "menu__item-ativo"}`]
}`}
>
Segurança e Privacidade
</li>
</Link>
<Link to="/contato" onClick={() => setPosition(6)}>
<li
className={`${styles["menu__item"]} ${
styles[`${routePosition === 6 && "menu__item-ativo"}`]
}`}
>
Contato
</li>
</Link>
</ul>
</div>
);
};
export { Menu };

13
src/components/Routes/Contato.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import styles from "../../styles/main.module.scss";
const Contato = () => {
return (
<main>
<div className={styles[""]}></div>
</main>
);
};
export { Contato };

44
src/components/Routes/Sobre.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from "react";
import styles from "../../styles/main.module.scss";
interface Iprops {
titulo: string;
}
const Sobre = ({ titulo }: Iprops) => {
return (
<div className={styles["principal__content"]}>
<h1 className={styles["principal__content-title"]}>{titulo}</h1>
<p className={styles["principal__content-text"]}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<p className={styles["principal__content-text"]}>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
<p className={styles["principal__content-text"]}>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
</p>
</div>
);
};
export { Sobre };

2
src/components/ScrollPage.tsx
View File

@ -15,7 +15,7 @@ const ScrollPage = () => {
return (
<div className={styles["volta-pag"]}>
<img className={styles["whatsapp-icon"]} src={whatsapp} alt="whatsapp" />
{pageYPosition > 400 && (
{pageYPosition > 200 && (
<a className={styles["volta-pag__link"]} href="#header">
<img className={styles["go-to-top"]} src={seta} alt="seta" />
</a>

2
src/components/Titulo.tsx
View File

@ -5,7 +5,7 @@ import styles from "../styles/main.module.scss";
const Titulo = () => {
return (
<div className={styles["main-wrapper__titulo"]}>
<h1 className={styles["titulo-text"]}>INSTUCIONAL</h1>
<h1 className={styles["titulo-text"]}>INSTITUCIONAL</h1>
</div>
);
};

147
src/styles/partials/MainContent.module.scss
View File

@ -1,6 +1,5 @@
.main-wrapper {
position: relative;
height: 1200px;
&__caminho {
display: flex;
@ -26,6 +25,61 @@
text-align: center;
margin: 0;
font-weight: 400;
letter-spacing: 0.1em;
}
}
&__conteudo {
padding: 0 100px 70px 100px;
border-bottom: 1px solid $black;
.principal {
display: flex;
gap: 30px;
height: 285px;
&__content {
&-title {
font-weight: 700;
font-size: 24px;
line-height: 28px;
margin: 12px 0;
}
&-text {
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: $gray;
margin: 0;
padding: 6px 0;
}
}
}
.conteudo-menu {
border-right: 1px solid $black;
width: 123.5%;
.menu {
padding: 0;
margin: 0;
list-style: none;
a {
text-decoration: none;
}
&__item {
font-size: 16px;
line-height: 19px;
color: $gray;
padding: 10px 0 10px 16px;
}
&__item-ativo {
color: $white;
padding: 10px 0 10px 16px;
background-color: $black;
}
}
}
}
@ -129,6 +183,54 @@
&__caminho {
padding: 29px 0 0 16px;
}
&__conteudo {
padding: 0 16px;
border-bottom: 1px solid $black;
.principal {
flex-direction: column;
gap: 30px;
height: auto;
margin-bottom: 80px;
&__content {
&-title {
text-align: center;
}
&-text:last-child {
display: none;
}
}
}
.conteudo-menu {
border-right: none;
width: 100%;
.menu {
padding: 0;
margin: 0;
list-style: none;
a {
text-decoration: none;
}
&__item {
font-size: 16px;
line-height: 19px;
color: $gray;
padding: 10px 0 10px 16px;
}
&__item-ativo {
color: $white;
padding: 10px 0 10px 16px;
background-color: $black;
}
}
}
}
&__newsletter {
padding: 16px;
width: auto;
@ -190,6 +292,45 @@
}
}
&__conteudo {
.principal {
height: 465px;
&__content {
&-title {
font-size: 48px;
line-height: 56px;
}
&-text {
font-size: 26px;
line-height: 30px;
}
}
}
.conteudo-menu {
width: 101%;
.menu {
padding: 0;
margin: 0;
list-style: none;
a {
text-decoration: none;
}
&__item {
font-size: 32px;
line-height: 38px;
}
&__item-ativo {
font-weight: 700;
}
}
}
}
&__newsletter {
width: 39.7%;
&-title {
@ -236,3 +377,7 @@
}
}
}
.principal {
width: 100%;
}