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

feat(main): cria ExampleSection e ajusta rotas

Browse Source
This commit is contained in:
Andrea Matsunaga 2023-01-17 16:22:09 -03:00
parent 146922da93
commit a1194761b4
8 changed files with 160 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss
View File

@ -1,8 +1,8 @@
.breadcrumbs {
display: flex;
gap: 9.72px;
align-items: center;
margin-bottom: 80px;
display: flex;
align-items: center;
gap: 9.72px;
@media screen and (width >= 2500px) {
gap: 12px;
@ -35,15 +35,15 @@
}
.current-location {
margin: 0;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #c4c4c4;
margin: 0;
// padding: 0;
text-transform: uppercase;
text-decoration: none;
@media screen and (width >= 2500px) {
font-size: 24px;
}

13
src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx
View File

@ -1,20 +1,23 @@
import React from "react";
import styles from "./Breadcrumbs.module.scss";
import { Link } from "react-router-dom";
import homeIcon from "./assets/home-icon.svg";
import arrowIcon from "./assets/arrow-icon.svg";
import styles from "./Breadcrumbs.module.scss";
const Breadcrumbs = () => {
return (
<div className={styles["breadcrumbs"]}>
<div className={styles["home-icon"]}>
<Link to="/institucionais/contato" className={styles["home-icon"]}>
<img src={homeIcon} alt="Ícone da Home" />
</div>
</Link>
<div className={styles["arrow-icon"]}>
<img src={arrowIcon} alt="Ícone de seta para a direita" />
</div>
<p className={styles["current-location"]}>Institucional</p>
<Link to="/institucionais/sobre" className={styles["current-location"]}>
Institucional
</Link>
</div>
);
};

73
src/components/MainLayout/ExampleSection/ExampleSection.module.scss Normal file
View File

@ -0,0 +1,73 @@
.section-container {
margin-left: 30px;
padding: 10px 0;
padding: 10px 0 26.56px;
@media screen and (width <= 1024px) {
padding: 0;
margin: 0;
}
.section-title {
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: #292929; // #000000 ??
margin: 0 0 12px;
@media screen and (width >= 2500px) {
font-size: 48px;
line-height: 56px;
}
@media screen and (width <= 1024px) {
text-align: center;
}
}
.section-description {
height: 223px;
display: flex;
flex-direction: column;
justify-content: space-between;
@media screen and (width >= 2500px) {
height: 376px;
}
@media screen and (width <= 1024px) {
height: 142px;
gap: 20px;
overflow: scroll;
}
@media screen and (width <= 480px) {
height: 344px;
}
.section-content {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: #7d7d7d;
margin: 0;
padding-right: 2px;
@media screen and (width >= 2500px) {
font-size: 26px;
line-height: 30px;
}
@media screen and (width <= 1024px) {
font-size: 12px;
line-height: 18px;
text-align: justify;
padding-right: 1px;
}
}
}
}

30
src/components/About/About.tsx → src/components/MainLayout/ExampleSection/ExampleSection.tsx
View File

@ -1,11 +1,31 @@
import React from "react";
import React, { useState, useContext, useEffect } from "react";
import { LocationContext } from "../../../contexts/LocationContext";
import styles from "./About.module.scss";
import styles from "./ExampleSection.module.scss";
const ExampleSection = () => {
const [title, setTitle] = useState("");
const { path } = useContext(LocationContext);
const updateTitle = () => {
if (path === "/institucionais/forma-de-pagamento") {
setTitle("Forma de Pagamento");
} else if (path === "/institucionais/entrega") {
setTitle("Entrega");
} else if (path === "/institucionais/troca-e-devolucao") {
setTitle("Troca e Devolução");
} else if (path === "/institucionais/seguranca-e-privacidade") {
setTitle("Segurança e Privacidade");
}
};
useEffect(() => {
updateTitle();
}, [path]);
const About = () => {
return (
<section className={styles["section-container"]}>
<h2 className={styles["section-title"]}>Sobre</h2>
<h2 className={styles["section-title"]}>{title}</h2>
<div className={styles["section-description"]}>
<p className={styles["section-content"]}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
@ -39,4 +59,4 @@ const About = () => {
);
};
export { About };
export { ExampleSection };

2
src/components/MainMenu/MainMenu.module.scss → src/components/MainLayout/MainMenu/MainMenu.module.scss
View File

@ -22,8 +22,8 @@
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-decoration: none;
color: #7d7d7d;
text-decoration: none;
@media screen and (width >= 2500px) {
font-size: 32px;

27
src/components/MainMenu/MainMenu.tsx → src/components/MainLayout/MainMenu/MainMenu.tsx
View File

@ -1,38 +1,39 @@
import React, { useState, useContext, useEffect } from "react";
import { Link } from "react-router-dom";
import { LocationContext } from "../../contexts/LocationContext";
import { LocationContext } from "../../../contexts/LocationContext";
import styles from "./MainMenu.module.scss";
const MainMenuItems = [
{
name: "Sobre",
value: "sobre",
value: "institucionais/sobre",
className: "sobre",
},
{
name: "Forma de Pagamento",
value: "forma-de-pagamento",
value: "institucionais/forma-de-pagamento",
className: "formaPagamento",
},
{
name: "Entrega",
value: "entrega",
value: "institucionais/entrega",
className: "entrega",
},
{
name: "Troca e Devolução",
value: "troca-e-devolucao",
value: "institucionais/troca-e-devolucao",
className: "trocaDevolucao",
},
{
name: "Segurança e Privacidade",
value: "seguranca-e-privacidade",
value: "institucionais/seguranca-e-privacidade",
className: "segurancaPrivacidade",
},
{
name: "Contato",
value: "contato",
value: "institucionais/contato",
className: "contato",
},
];
@ -50,7 +51,7 @@ const MainMenu = () => {
const { path } = useContext(LocationContext);
const updateLocation = () => {
if (path === "/sobre") {
if (path === "/institucionais/sobre") {
setIsActive({
sobre: true,
formaPagamento: false,
@ -59,7 +60,7 @@ const MainMenu = () => {
segurancaPrivacidade: false,
contato: false,
});
} else if (path === "/formaPagamento") {
} else if (path === "/institucionais/forma-de-pagamento") {
setIsActive({
sobre: false,
formaPagamento: true,
@ -68,7 +69,7 @@ const MainMenu = () => {
segurancaPrivacidade: false,
contato: false,
});
} else if (path === "/entrega") {
} else if (path === "/institucionais/entrega") {
setIsActive({
sobre: false,
formaPagamento: false,
@ -77,7 +78,7 @@ const MainMenu = () => {
segurancaPrivacidade: false,
contato: false,
});
} else if (path === "/trocaDevolucao") {
} else if (path === "/institucionais/troca-e-devolucao") {
setIsActive({
sobre: false,
formaPagamento: false,
@ -86,7 +87,7 @@ const MainMenu = () => {
segurancaPrivacidade: false,
contato: false,
});
} else if (path === "/segurancaPrivacidade") {
} else if (path === "/institucionais/seguranca-e-privacidade") {
setIsActive({
sobre: false,
formaPagamento: false,
@ -95,7 +96,7 @@ const MainMenu = () => {
segurancaPrivacidade: true,
contato: false,
});
} else if (path === "/contato") {
} else if (path === "/institucionais/contato") {
setIsActive({
sobre: false,
formaPagamento: false,

0
src/pages/Institucional.module.scss
View File

60
src/pages/Institucional.tsx
View File

@ -1,16 +1,15 @@
import React, { useEffect } from "react";
import React from "react";
import {
createBrowserRouter,
RouterProvider,
redirect,
} from "react-router-dom";
import { About } from "../components/About/About";
import { Contact } from "../components/Contact/Contact";
import { About } from "../components/MainLayout/About/About";
import { Contact } from "../components/MainLayout/Contact/Contact";
import { ExampleSection } from "../components/MainLayout/ExampleSection/ExampleSection";
import { MainLayout } from "../components/MainLayout/MainLayout";
// import styles from "./Institucional.module.scss";
const Institucional = () => {
const institucionalRouter = createBrowserRouter([
{
@ -19,31 +18,36 @@ const Institucional = () => {
children: [
{
path: "",
loader: () => redirect("sobre"),
loader: () => redirect("institucionais/sobre"),
},
{
path: "sobre",
element: <About />,
},
// {
// path: "forma-de-pagamento",
// element: <Payment />,
// },
// {
// path: "entrega",
// element: <Shipping />,
// },
// {
// path: "troca-e-devolucao",
// element: <ExchangeAndReturn />,
// },
// {
// path: "seguranca-e-privacidade",
// element: <Security />,
// },
{
path: "contato",
element: <Contact />,
path: "institucionais",
children: [
{
path: "sobre",
element: <About />,
},
{
path: "forma-de-pagamento",
element: <ExampleSection />,
},
{
path: "entrega",
element: <ExampleSection />,
},
{
path: "troca-e-devolucao",
element: <ExampleSection />,
},
{
path: "seguranca-e-privacidade",
element: <ExampleSection />,
},
{
path: "contato",
element: <Contact />,
},
],
},
],
},