From ceb2b105d4127b3a558c130944aa7612fba1e663 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Tue, 10 Jan 2023 23:03:18 -0300
Subject: [PATCH] feat: Adiciona componentes de links no menu

---
 README.md                                         |  2 +-
 .../src/components/Header/Hamburguer.tsx          | 13 ++++---------
 react-project/src/components/Header/LinksMenu.tsx | 15 +++++++++++++++
 react-project/src/components/Header/Menu.tsx      | 13 ++++---------
 .../Header/assets/modules/Header.module.scss      |  4 ++++
 .../Header/assets/modules/Menu.module.scss        |  4 ++++
 .../src/components/MainInstitucional/Main.tsx     |  4 ++--
 7 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 react-project/src/components/Header/LinksMenu.tsx

diff --git a/README.md b/README.md
index d322d72..8240b44 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Desafio REACT e Typescript
 
-Para rodar o projeto, use o no terminal:
+Para rodar o projeto, use no terminal:
 
 cd react-project
 npm start
diff --git a/react-project/src/components/Header/Hamburguer.tsx b/react-project/src/components/Header/Hamburguer.tsx
index 247d859..13a7b7e 100644
--- a/react-project/src/components/Header/Hamburguer.tsx
+++ b/react-project/src/components/Header/Hamburguer.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import Modal from "react-modal";
 
 import hamburguer from "./assets/modules/Hamburguer.module.scss";
+import { LinksMenu } from "./LinksMenu";
 
 import hamb from "./assets/svgs/hamburguer.svg";
 import close from "./assets/svgs/close.svg";
@@ -31,15 +32,9 @@ const Hamburguer = () => {
         </div>
 
         <ul>
-          <li>
-            <a href="/">CURSOS</a>
-          </li>
-          <li>
-            <a href="/">SAIBA MAIS</a>
-          </li>
-          <li>
-            <a href="/">INSTITUCIONAIS</a>
-          </li>
+          <LinksMenu text="CURSOS" href="/" />
+          <LinksMenu text="SAIBA MAIS" href="/" />
+          <LinksMenu text="INSTITUCIONAIS" href="/" />
         </ul>
       </Modal>
     </>
diff --git a/react-project/src/components/Header/LinksMenu.tsx b/react-project/src/components/Header/LinksMenu.tsx
new file mode 100644
index 0000000..9d33d89
--- /dev/null
+++ b/react-project/src/components/Header/LinksMenu.tsx
@@ -0,0 +1,15 @@
+interface ILinkMenu {
+  href: string;
+  text: string;
+}
+
+const LinksMenu = (props: ILinkMenu) => {
+  const { href, text } = props;
+  return (
+    <li>
+      <a href={href}>{text}</a>
+    </li>
+  );
+};
+
+export { LinksMenu };
diff --git a/react-project/src/components/Header/Menu.tsx b/react-project/src/components/Header/Menu.tsx
index 286435f..7903489 100644
--- a/react-project/src/components/Header/Menu.tsx
+++ b/react-project/src/components/Header/Menu.tsx
@@ -1,18 +1,13 @@
 import menu from "./assets/modules/Menu.module.scss";
+import { LinksMenu } from "./LinksMenu";
 
 const Menu = () => {
   return (
     <nav className={menu["menu"]}>
       <ul>
-        <li>
-          <a href="/">CURSOS</a>
-        </li>
-        <li>
-          <a href="/">SAIBA MAIS</a>
-        </li>
-        <li>
-          <a href="/">INSTITUCIONAIS</a>
-        </li>
+        <LinksMenu text="CURSOS" href="/" />
+        <LinksMenu text="SAIBA MAIS" href="/" />
+        <LinksMenu text="INSTITUCIONAIS" href="/" />
       </ul>
     </nav>
   );
diff --git a/react-project/src/components/Header/assets/modules/Header.module.scss b/react-project/src/components/Header/assets/modules/Header.module.scss
index 429c023..0b93306 100644
--- a/react-project/src/components/Header/assets/modules/Header.module.scss
+++ b/react-project/src/components/Header/assets/modules/Header.module.scss
@@ -32,6 +32,10 @@
         line-height: 16px;
         text-decoration: none;
 
+        &:hover {
+          color: var(--gray-100);
+        }
+
         @media screen and (min-width: 2500px) {
           font-size: 28px;
           line-height: 33px;
diff --git a/react-project/src/components/Header/assets/modules/Menu.module.scss b/react-project/src/components/Header/assets/modules/Menu.module.scss
index 3538177..eb2fb8b 100644
--- a/react-project/src/components/Header/assets/modules/Menu.module.scss
+++ b/react-project/src/components/Header/assets/modules/Menu.module.scss
@@ -17,6 +17,10 @@
         color: var(--white);
         text-decoration: none;
 
+        &:hover {
+          color: var(--gray-100);
+        }
+
         @media screen and (min-width: 2500px) {
           font-size: 28px;
           line-height: 33px;
diff --git a/react-project/src/components/MainInstitucional/Main.tsx b/react-project/src/components/MainInstitucional/Main.tsx
index c59ede7..f2ecb4d 100644
--- a/react-project/src/components/MainInstitucional/Main.tsx
+++ b/react-project/src/components/MainInstitucional/Main.tsx
@@ -14,7 +14,7 @@ import { Contato } from "./Contato";
 
 const Main = () => {
   return (
-    <div className={main["main"]}>
+    <main className={main["main"]}>
       <Breadcrumb />
 
       <section>
@@ -33,7 +33,7 @@ const Main = () => {
           </Routes>
         </div>
       </section>
-    </div>
+    </main>
   );
 };