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

feat: Adiciona componentes de links no menu

Browse Source
This commit is contained in:
Cainã Milech 2023-01-10 23:03:18 -03:00
parent cf387c8216
commit ceb2b105d4
7 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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

13
react-project/src/components/Header/Hamburguer.tsx
View File

@ -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>
</>

15
react-project/src/components/Header/LinksMenu.tsx Normal file
View File

@ -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 };

13
react-project/src/components/Header/Menu.tsx
View File

@ -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>
);

4
react-project/src/components/Header/assets/modules/Header.module.scss
View File

@ -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;

4
react-project/src/components/Header/assets/modules/Menu.module.scss
View File

@ -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;

4
react-project/src/components/MainInstitucional/Main.tsx
View File

@ -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>
);
};