From a1194761b410c894fe4b12e303c92d587f403a5e Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Tue, 17 Jan 2023 16:22:09 -0300 Subject: [PATCH] feat(main): cria ExampleSection e ajusta rotas --- .../Breadcrumbs/Breadcrumbs.module.scss | 14 ++-- .../MainLayout/Breadcrumbs/Breadcrumbs.tsx | 13 ++-- .../ExampleSection/ExampleSection.module.scss | 73 +++++++++++++++++++ .../ExampleSection/ExampleSection.tsx} | 30 ++++++-- .../MainMenu/MainMenu.module.scss | 2 +- .../{ => MainLayout}/MainMenu/MainMenu.tsx | 27 +++---- src/pages/Institucional.module.scss | 0 src/pages/Institucional.tsx | 60 ++++++++------- 8 files changed, 160 insertions(+), 59 deletions(-) create mode 100644 src/components/MainLayout/ExampleSection/ExampleSection.module.scss rename src/components/{About/About.tsx => MainLayout/ExampleSection/ExampleSection.tsx} (68%) rename src/components/{ => MainLayout}/MainMenu/MainMenu.module.scss (100%) rename src/components/{ => MainLayout}/MainMenu/MainMenu.tsx (79%) delete mode 100644 src/pages/Institucional.module.scss diff --git a/src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss b/src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss index a8e5fac..5576130 100644 --- a/src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss +++ b/src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss @@ -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; } diff --git a/src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx b/src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx index a0381e1..24c16e7 100644 --- a/src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx @@ -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 (
-
+ Ícone da Home -
+
Ícone de seta para a direita
-

Institucional

+ + Institucional +
); }; diff --git a/src/components/MainLayout/ExampleSection/ExampleSection.module.scss b/src/components/MainLayout/ExampleSection/ExampleSection.module.scss new file mode 100644 index 0000000..1e15087 --- /dev/null +++ b/src/components/MainLayout/ExampleSection/ExampleSection.module.scss @@ -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; + } + } + } +} diff --git a/src/components/About/About.tsx b/src/components/MainLayout/ExampleSection/ExampleSection.tsx similarity index 68% rename from src/components/About/About.tsx rename to src/components/MainLayout/ExampleSection/ExampleSection.tsx index 2904af7..38e8ad7 100644 --- a/src/components/About/About.tsx +++ b/src/components/MainLayout/ExampleSection/ExampleSection.tsx @@ -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 (
-

Sobre

+

{title}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do @@ -39,4 +59,4 @@ const About = () => { ); }; -export { About }; +export { ExampleSection }; diff --git a/src/components/MainMenu/MainMenu.module.scss b/src/components/MainLayout/MainMenu/MainMenu.module.scss similarity index 100% rename from src/components/MainMenu/MainMenu.module.scss rename to src/components/MainLayout/MainMenu/MainMenu.module.scss index e10d2c0..00e33f7 100644 --- a/src/components/MainMenu/MainMenu.module.scss +++ b/src/components/MainLayout/MainMenu/MainMenu.module.scss @@ -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; diff --git a/src/components/MainMenu/MainMenu.tsx b/src/components/MainLayout/MainMenu/MainMenu.tsx similarity index 79% rename from src/components/MainMenu/MainMenu.tsx rename to src/components/MainLayout/MainMenu/MainMenu.tsx index f567ae9..add4d07 100644 --- a/src/components/MainMenu/MainMenu.tsx +++ b/src/components/MainLayout/MainMenu/MainMenu.tsx @@ -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, diff --git a/src/pages/Institucional.module.scss b/src/pages/Institucional.module.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/Institucional.tsx b/src/pages/Institucional.tsx index 8040cd3..7f2dd3b 100644 --- a/src/pages/Institucional.tsx +++ b/src/pages/Institucional.tsx @@ -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: , - }, - // { - // path: "forma-de-pagamento", - // element: , - // }, - // { - // path: "entrega", - // element: , - // }, - // { - // path: "troca-e-devolucao", - // element: , - // }, - // { - // path: "seguranca-e-privacidade", - // element: , - // }, - { - path: "contato", - element: , + path: "institucionais", + children: [ + { + path: "sobre", + element: , + }, + { + path: "forma-de-pagamento", + element: , + }, + { + path: "entrega", + element: , + }, + { + path: "troca-e-devolucao", + element: , + }, + { + path: "seguranca-e-privacidade", + element: , + }, + { + path: "contato", + element: , + }, + ], }, ], },