Merge pull request 'feat: criado o router react para o institucional.' (#12) from feature/institucional into development

Reviewed-on: #12

src/components/section/ContentEntrega.tsx

@@ -2,12 +2,12 @@
 import React from "react";
 
 // Estilos
-//import styleContentEntrega from "./ContentEntrega.module.scss";
+import styleContentInstitucional from "./ContentInstitucional.module.scss";
 
 const ContentEntrega = () => {
   return (
-    <div>
-      <h2>Forma de Pagamento</h2>
+    <div className={styleContentInstitucional["contentInstitucional"]}>
+      <h2>Entrega e Devolução</h2>
 
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, alias,

src/components/section/ContentInstitucional.tsx

@@ -1,31 +0,0 @@
-// Bibliotecas
-import React from "react";
-import { Routes, Route } from "react-router-dom";
-
-// Estilos
-import styleContentInstitucional from "./ContentInstitucional.module.scss";
-
-import { ContentPagamento } from "./ContentPagamento";
-import { ContentEntrega } from "./ContentEntrega";
-import { ContentTroca } from "./ContentTroca";
-import { ContentSeguranca } from "./ContentSeguranca";
-import { ContentContato } from "./ContentContato";
-import { ContentSobre } from "./ContentSobre";
-
-const ContentInstitucional = () => {
-  return (
-    <div className={styleContentInstitucional["contentInstitucional"]}>
-      <Routes>
-        <Route path="/" element={<ContentSobre />} />
-        <Route path="/sobre" element={<ContentSobre />} />
-        <Route path="/forma-de-pagamento" element={<ContentPagamento />} />
-        <Route path="/entrega" element={<ContentEntrega />} />
-        <Route path="/troca-e-devolucao" element={<ContentTroca />} />
-        <Route path="/seguranca-e-privacidade" element={<ContentSeguranca />} />
-        <Route path="/contato" element={<ContentContato />} />
-      </Routes>
-    </div>
-  );
-};
-
-export { ContentInstitucional };

src/components/section/ContentPagamento.tsx

@@ -2,11 +2,11 @@
 import React from "react";
 
 // Estilos
-//import styleContentPagamento from "./ContentPagamento.module.scss";
+import styleContentInstitucional from "./ContentInstitucional.module.scss";
 
 const ContentPagamento = () => {
   return (
-    <div>
+    <div className={styleContentInstitucional["contentInstitucional"]}>
       <h2>Forma de Pagamento</h2>
 
       <p>

src/components/section/ContentSeguranca.tsx

@@ -2,11 +2,11 @@
 import React from "react";
 
 // Estilos
-//import styleContentSeguranca from "./ContentSeguranca.module.scss";
+import styleContentInstitucional from "./ContentInstitucional.module.scss";
 
 const ContentSeguranca = () => {
   return (
-    <div>
+    <div className={styleContentInstitucional["contentInstitucional"]}>
       <h2>Segurança e Privacidade</h2>
 
       <p>

src/components/section/ContentSobre.tsx

@@ -1,9 +1,12 @@
 // Bibliotecas
 import React from "react";
 
+// Estilos
+import styleContentInstitucional from "./ContentInstitucional.module.scss";
+
 const ContentSobre = () => {
   return (
-    <div>
+    <div className={styleContentInstitucional["contentInstitucional"]}>
       <h2>Sobre</h2>
 
       <p>

src/components/section/ContentTroca.tsx

@@ -2,11 +2,11 @@
 import React from "react";
 
 // Estilos
-//import styleContentTroca from "./ContentTroca.module.scss";
+import styleContentInstitucional from "./ContentInstitucional.module.scss";
 
 const ContentTroca = () => {
   return (
-    <div>
+    <div className={styleContentInstitucional["contentInstitucional"]}>
       <h2>Troca e Devolução</h2>
 
       <p>

src/components/section/NavInstitucional.module.scss

@@ -19,10 +19,11 @@
     }
 
     li {
-      padding: 10px 16px;
+      display: flex;
+      align-items: center;
       width: 302px;
       height: 39px;
-
+     
       @media (min-width: 2500px) {
         width: 590px;
         height: 58px;
@@ -47,16 +48,16 @@
     }
 
     .active {
+      display: flex;
       background-color: $black;
+      width: 100%;
+      padding: 10px 16px;
+      color: $white;
+      font-weight: 700;
 
-      a {
-        color: $white;
-        font-weight: 700;
-
-        @media (min-width: 2500px) {
-          font-size: 32px;
-          line-height: 38px;
-        }
+      @media (min-width: 2500px) {
+        font-size: 32px;
+        line-height: 38px;
       }
     }
   }

src/components/section/NavInstitucional.tsx

@@ -1,46 +0,0 @@
-// Bibliotecas
-import React from "react";
-
-// Estilos
-import styleNavInstitucional from "./NavInstitucional.module.scss";
-
-import { ContentPagamento } from "./ContentPagamento";
-import { ContentEntrega } from "./ContentEntrega";
-import { ContentTroca } from "./ContentTroca";
-import { ContentSeguranca } from "./ContentSeguranca";
-import { ContentContato } from "./ContentContato";
-import { ContentSobre } from "./ContentSobre";
-
-const NavInstitucional = () => {
-  return (
-    <nav className={styleNavInstitucional["navInstitucional"]}>
-      <ul>
-        <li className={styleNavInstitucional["active"]} >
-          <a href="sobre">Sobre</a>
-        </li>
-
-        <li>
-          <a href="forma-de-pagamento">Forma de Pagamento</a>
-        </li>
-
-        <li>
-          <a href="entrega">Entrega</a>
-        </li>
-
-        <li>
-          <a href="troca-e-devolucao">Troca e Evolução</a>
-        </li>
-
-        <li>
-          <a href="seguranca-e-privacidade">Segurança e Privacidade</a>
-        </li>
-
-        <li>
-          <a href="contato">Contato</a>
-        </li>
-      </ul>
-    </nav>
-  );
-};
-
-export { NavInstitucional };

src/components/section/Router.tsx

@@ -0,0 +1,103 @@
+// Bibliotecas
+import React from "react";
+import { Routes, Route, NavLink } from "react-router-dom";
+
+// Componentes
+import { ContentPagamento } from "./ContentPagamento";
+import { ContentEntrega } from "./ContentEntrega";
+import { ContentTroca } from "./ContentTroca";
+import { ContentSeguranca } from "./ContentSeguranca";
+import { ContentContato } from "./ContentContato";
+import { ContentSobre } from "./ContentSobre";
+
+// Estilos
+import styleNavInstitucional from "./NavInstitucional.module.scss";
+import styleSection from "./Section.module.scss";
+
+const Institucional = () => {
+  return (
+    <section className={styleSection["section"]}>
+      <nav className={styleNavInstitucional["navInstitucional"]}>
+        <ul>
+          <li>
+            <NavLink
+              className={({ isActive }) =>
+                isActive ? styleNavInstitucional.active : undefined
+              }
+              to="/sobre"
+            >
+              Sobre
+            </NavLink>
+          </li>
+
+          <li>
+            <NavLink
+              className={({ isActive }) =>
+                isActive ? styleNavInstitucional.active : undefined
+              }
+              to="/forma-de-pagamento"
+            >
+              Forma de Pagamento
+            </NavLink>
+          </li>
+
+          <li>
+            <NavLink
+              className={({ isActive }) =>
+                isActive ? styleNavInstitucional.active : undefined
+              }
+              to="/entrega"
+            >
+              Entrega
+            </NavLink>
+          </li>
+
+          <li>
+            <NavLink
+              className={({ isActive }) =>
+                isActive ? styleNavInstitucional.active : undefined
+              }
+              to="/troca-e-devolucao"
+            >
+              Troca e Evolução
+            </NavLink>
+          </li>
+
+          <li>
+            <NavLink
+              className={({ isActive }) =>
+                isActive ? styleNavInstitucional.active : undefined
+              }
+              to="/seguranca-e-privacidade"
+            >
+              Segurança e Privacidade
+            </NavLink>
+          </li>
+
+          <li>
+            <NavLink
+              className={({ isActive }) =>
+                isActive ? styleNavInstitucional.active : undefined
+              }
+              to="/contato"
+            >
+              Contato
+            </NavLink>
+          </li>
+        </ul>
+      </nav>
+
+      <Routes>
+        <Route path="/" element={<ContentSobre />} />
+        <Route path="/sobre" element={<ContentSobre />} />
+        <Route path="/forma-de-pagamento" element={<ContentPagamento />} />
+        <Route path="/entrega" element={<ContentEntrega />} />
+        <Route path="/troca-e-devolucao" element={<ContentTroca />} />
+        <Route path="/seguranca-e-privacidade" element={<ContentSeguranca />} />
+        <Route path="/contato" element={<ContentContato />} />
+      </Routes>
+    </section>
+  );
+};
+
+export { Institucional };

src/pages/Section.tsx

@@ -4,22 +4,14 @@ import React from "react";
 // Componentes
 import { Breadcrumb } from "../components/section/Breadcrumb";
 import { TitleInstitucional } from "../components/section/TitleInstitucional";
-import { NavInstitucional } from "../components/section/NavInstitucional";
-import { ContentInstitucional } from "../components/section/ContentInstitucional";
-
-// Estilos
-import styleSection from "../components/section/Section.module.scss";
+import { Institucional } from "../components/section/Router";
 
 const Section = () => {
   return (
     <main>
       <Breadcrumb />
       <TitleInstitucional />
-
-      <section className={styleSection["section"]}>
-        <NavInstitucional />
-        <ContentInstitucional />
-      </section>
+      <Institucional />
     </main>
   );
 };