anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(Main.tsx): adicionando componente NavLinkContent na estrutura Main

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-11 16:11:15 -03:00
parent 3753841baa
commit e0c55c7562
1 changed files with 8 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/Main/Main.tsx
View File

@ -1,7 +1,8 @@
import { BrowserRouter, Link, NavLink } from "react-router-dom";
import { BrowserRouter, Link } from "react-router-dom";
import Rotas from "../../config/routes";
import HomeIcon from "../../assets/imgs/HomeIcon.svg";
import ArrowPointToRight from "../../assets/imgs/ArrowPointToRight.svg";
import {NavLinkContent} from "./NavLink/NavLink";
import styles from "./Main.module.scss";
const Main = () => {
@ -25,61 +26,12 @@ const Main = () => {
<section className={styles["Container"]}>
<aside>
<ul>
<li>
<NavLink to="/" style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",})}>
Sobre
</NavLink>
</li>
<li>
<NavLink to="/formadepagamento" style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",})}>
Forma de Pagamento
</NavLink>
</li>
<li>
<NavLink to="/entrega" style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",
})}>
Entrega
</NavLink>
</li>
<li>
<NavLink to="/trocaedevolucao"
style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",
})}>
Troca e Devolução
</NavLink>
</li>
<li>
<NavLink to="/segurancaprivacidade"
style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",
})}>
Segurança e Privacidade
</NavLink>
</li>
<li>
<NavLink to="/contato"
style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",
})}>
Contato
</NavLink>
</li>
<NavLinkContent to="/" text="Sobre"/>
<NavLinkContent to="/formadepagamento" text="Forma de Pagamento"/>
<NavLinkContent to="/entrega" text="Entrega"/>
<NavLinkContent to="/trocaedevolucao" text="Troca e Devolução"/>
<NavLinkContent to="/segurancaprivacidade" text="Segurança e Privacidade"/>
<NavLinkContent to="/contato" text="Contato"/>
</ul>
</aside>
<Rotas />