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

release/header #19

Merged
luizfelipe9627 merged 37 commits from release/header into main 2023-01-19 02:56:32 +00:00
Conversation 0 Commits 37 Files Changed 81 +129 -107
10 changed files with 129 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d3d838a064 - Show all commits

6
src/components/section/ContentEntrega.tsx
View File

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

31
src/components/section/ContentInstitucional.tsx
View File

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

4
src/components/section/ContentPagamento.tsx
View File

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

4
src/components/section/ContentSeguranca.tsx
View File

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

5
src/components/section/ContentSobre.tsx
View File

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

4
src/components/section/ContentTroca.tsx
View File

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

21
src/components/section/NavInstitucional.module.scss
View File

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

46
src/components/section/NavInstitucional.tsx
View File

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

103
src/components/section/Router.tsx Normal file
View File

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

12
src/pages/Section.tsx
View File

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