From 062a5edf958a978cac54b53e4d7bc12897cd75fb Mon Sep 17 00:00:00 2001
From: Luiz Felipe Silva <felipesilva9627@hotmail.com>
Date: Tue, 17 Jan 2023 16:43:28 -0300
Subject: [PATCH] feat: criado o router react para o institucional.

---
 src/components/section/ContentEntrega.tsx     |   6 +-
 .../section/ContentInstitucional.tsx          |  31 ------
 src/components/section/ContentPagamento.tsx   |   4 +-
 src/components/section/ContentSeguranca.tsx   |   4 +-
 src/components/section/ContentSobre.tsx       |   5 +-
 src/components/section/ContentTroca.tsx       |   4 +-
 .../section/NavInstitucional.module.scss      |  21 ++--
 src/components/section/NavInstitucional.tsx   |  46 --------
 src/components/section/Router.tsx             | 103 ++++++++++++++++++
 src/pages/Section.tsx                         |  12 +-
 10 files changed, 129 insertions(+), 107 deletions(-)
 delete mode 100644 src/components/section/ContentInstitucional.tsx
 delete mode 100644 src/components/section/NavInstitucional.tsx
 create mode 100644 src/components/section/Router.tsx

diff --git a/src/components/section/ContentEntrega.tsx b/src/components/section/ContentEntrega.tsx
index d8bd0d7..48181a7 100644
--- a/src/components/section/ContentEntrega.tsx
+++ b/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,
diff --git a/src/components/section/ContentInstitucional.tsx b/src/components/section/ContentInstitucional.tsx
deleted file mode 100644
index 605109a..0000000
--- a/src/components/section/ContentInstitucional.tsx
+++ /dev/null
@@ -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 };
diff --git a/src/components/section/ContentPagamento.tsx b/src/components/section/ContentPagamento.tsx
index 73e1531..5808e62 100644
--- a/src/components/section/ContentPagamento.tsx
+++ b/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>
diff --git a/src/components/section/ContentSeguranca.tsx b/src/components/section/ContentSeguranca.tsx
index dedd0bd..5fa975b 100644
--- a/src/components/section/ContentSeguranca.tsx
+++ b/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>
diff --git a/src/components/section/ContentSobre.tsx b/src/components/section/ContentSobre.tsx
index e499ba0..e329af8 100644
--- a/src/components/section/ContentSobre.tsx
+++ b/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>
diff --git a/src/components/section/ContentTroca.tsx b/src/components/section/ContentTroca.tsx
index c5efc7d..48f0830 100644
--- a/src/components/section/ContentTroca.tsx
+++ b/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>
diff --git a/src/components/section/NavInstitucional.module.scss b/src/components/section/NavInstitucional.module.scss
index 59e5a1d..4b86b6a 100644
--- a/src/components/section/NavInstitucional.module.scss
+++ b/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;
       }
     }
   }
diff --git a/src/components/section/NavInstitucional.tsx b/src/components/section/NavInstitucional.tsx
deleted file mode 100644
index f933cf0..0000000
--- a/src/components/section/NavInstitucional.tsx
+++ /dev/null
@@ -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 };
diff --git a/src/components/section/Router.tsx b/src/components/section/Router.tsx
new file mode 100644
index 0000000..1829b03
--- /dev/null
+++ b/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 };
diff --git a/src/pages/Section.tsx b/src/pages/Section.tsx
index 738ff92..72712e2 100644
--- a/src/pages/Section.tsx
+++ b/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>
   );
 };