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

feat: cria rotas para subpastas de institucional #10

Merged
emmanuelvitor merged 1 commits from feature/router into development 2023-01-16 15:16:58 +00:00
Conversation 0 Commits 1 Files Changed 21 +295 -83
21 changed files with 295 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a2f0995df5 - Show all commits

1
package.json
View File

@ -15,6 +15,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-headless-accordion": "^1.0.2",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0",

39
src/components/BreadCrumb/BreadCreumb.tsx Normal file
View File

@ -0,0 +1,39 @@
import React from "react";
import { IconLink } from "../utils/IconLink";
import { ListItem } from "../utils/ListItem";
import homeIcon from "./assets/svgs/home.svg"
import arrowRight from "./assets/svgs/arrow-right.svg"
import { useLocation, Link } from "react-router-dom"
import styles from "./BreadCrumb.module.scss"
export const BreadCrumb = () => {
const { pathname } = useLocation()
const routeName = pathname.split("/")[1]
return (
<nav >
{pathname !== "/" && (
<ul className={styles.breadNav}>
<li>
<Link to="/">
<img src={homeIcon} alt="Icone de home" />
</Link>
</li>
<li className={styles.navItem}>
<img src={arrowRight} alt="Icone de seta para a direita" />
<span className={styles.routeName}>
{routeName}
</span>
</li>
</ul>
)}
</nav>
);
}

27
src/components/BreadCrumb/BreadCrumb.module.scss Normal file
View File

@ -0,0 +1,27 @@
.breadNav {
display: flex;
gap: 12px;
align-items: center;
margin: 0 7.8125%;
padding: 30px 16px;
}
.navItem {
display: flex;
gap: 12px;
align-items: center;
}
.routeName {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #C4C4C4;
text-transform: uppercase;
}

0
src/components/Main/BreadCrumb/assets/svgs/arrow-right.svg → src/components/BreadCrumb/assets/svgs/arrow-right.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 B

After

Width:  |  Height:  |  Size: 669 B

0
src/components/Main/BreadCrumb/assets/svgs/home.svg → src/components/BreadCrumb/assets/svgs/home.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 986 B

After

Width:  |  Height:  |  Size: 986 B

2
src/components/Footer/NewsLetter/Newsletter.module.scss
View File

@ -1,6 +1,8 @@
.newsLetter {
width: 100%;
padding: 16px 0;
border-top: 1px solid;
border-bottom: 1px solid;
&__wrapper {
display: flex;

27
src/components/Footer/Rodape/Rodape.module.scss
View File

@ -22,21 +22,6 @@
margin: 0 16px;
}
// .container {
// width: 94.9734%;
// align-items: center;
// display: flex;
// justify-content: space-between;
// @media (max-width: 1024px) {
// flex-direction: column;
// align-items: flex-start;
// margin: 0 16px;
// }
// }
}
&__address {
@ -96,6 +81,7 @@
img {
width: 36px;
height: 20.2px;
@media(min-width:2500px) {
width: 70px;
height: 39.27px;
@ -109,13 +95,14 @@
@media (max-width: 490px) {
width: 30px;
height: 17px;
}
@media (max-width: 370px) {
column-gap: 5.5px;
width: 18px;
width: 19px;
column-gap: 5.5px;
width: 18px;
width: 19px;
}

16
src/components/Header/HeaderDesk/HeaderBottom.tsx
View File

@ -1,19 +1,21 @@
import React from "react";
import styleHeader from '../styles/Header.module.scss';
import { Link } from "react-router-dom"
export const HeaderBottom = () => {
return (
<div className={styleHeader["header__bottom"]}>
<nav className={styleHeader["navBar__items"]}>
<a className={styleHeader["list__items__link"]} href="/cursos">
<Link className={styleHeader["list__items__link"]} to="/cursos">
Cursos
</a>
<a className={styleHeader["list__items__link"]} href="/saiba-mais">
</Link>
<Link className={styleHeader["list__items__link"]} to="/saiba-mais">
Saiba Mais
</a>
<a className={styleHeader["list__items__link"]} href="/institucionais">
Institucionais
</a>
</Link>
<Link className={styleHeader["list__items__link"]} to="/institucional">
Institucional
</Link>
</nav>
</div>
);

2
src/components/Header/styles/Header.module.scss
View File

@ -314,7 +314,7 @@ a {
background: #FFFFFF;
transition: all .45s;
}
@media (max-width:1024px) {

24
src/components/Layout/index.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Outlet } from "react-router-dom"
import { Footer } from "../Footer/Footer"
import { Header } from "../Header/Header"
import { BreadCrumb } from "../BreadCrumb/BreadCreumb"
import styles from "./styles.module.scss"
export const Layout = () => {
return (
<div className={styles.container}>
<Header />
<BreadCrumb />
<main className={styles.main}>
<Outlet />
</main>
<Footer />
</div >
)
}

19
src/components/Layout/styles.module.scss Normal file
View File

@ -0,0 +1,19 @@
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.main {
display: flex;
height: auto;
margin: 0 7.8125%;
flex-direction: column;
}

26
src/components/Main/BreadCrumb/BreadCreumb.tsx
View File

@ -1,26 +0,0 @@
import React from "react";
import { IconLink } from "../../utils/IconLink";
import { ListItem } from "../../utils/ListItem";
import homeIcon from "./assets/svgs/home.svg"
import arrowRight from "./assets/svgs/arrow-right.svg"
export const BreadCrumb = () => {
return (
<nav>
<ul>
<li>
<a href="/">
<img src={homeIcon} alt="Icone de home" />
</a>
</li>
<li>
<img src={homeIcon} alt="Icone de home" />
</li>
<li>
<img src={homeIcon} alt="Icone de home" />
</li>
</ul>
</nav>
);
}

0
src/components/Main/BreadCrumb/BreadCrumb.module.scss
View File

0
src/components/Main/Main.module.scss
View File

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

@ -1,11 +0,0 @@
import React from "react";
import "./Main.module.scss";
export const Main = () => {
return (
<div></div>
);
}

8
src/index.tsx
View File

@ -1,12 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Home } from './pages/Home';
import './index.css';
import { BrowserRouter } from "react-router-dom"
import { Routes } from './routes';
function App() {
return (
<Home />
<BrowserRouter>
<Routes />
</BrowserRouter>
);
}

16
src/pages/Home.tsx
View File

@ -1,16 +0,0 @@
import React from "react";
import { Footer } from "../components/Footer/Footer";
import { Header } from "../components/Header/Header";
import { Main } from "../components/Main/Main";
export const Home = () => {
return (
<>
<Header />
<Main />
<Footer />
</>
)
}

46
src/pages/Intitucional/Institucional.module.scss Normal file
View File

@ -0,0 +1,46 @@
.batata {
display: flex;
gap: 30px;
.sideBar {
display: flex;
flex-direction: column;
border-right: 1px solid #000;
width: 100%;
min-width: 302px;
padding: 0;
@media (min-width:2500px) {}
@media (max-width:1024px) {
min-width: none;
}
&__item {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
text-transform: inherit;
padding: 10px 16px;
color: #7D7D7D;
&.ativo {
background-color: #000;
color: #fff;
font-weight: 700;
font-size: 16px;
line-height: 19px;
}
}
}
.content-right {
background-color: aquamarine;
width: 100%;
}
}

71
src/pages/Intitucional/Instituicional.tsx Normal file
View File

@ -0,0 +1,71 @@
import React from "react";
import { NavLink, Outlet } from "react-router-dom";
import styleInstitucional from "./Institucional.module.scss"
export const Instituicional = () => {
return (
<>
<h1>Institucional</h1>
<div className={styleInstitucional["batata"]}>
<nav>
<ul className={styleInstitucional["sideBar"]}>
<NavLink
to="sobre"
className={({ isActive }) =>
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
}>
Sobre
</NavLink>
<NavLink
to="forma-de-pagamento"
className={({ isActive }) =>
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
}>
Forma de Pagamento
</NavLink>
<NavLink
to="entrega"
className={({ isActive }) =>
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
}>
Entrega
</NavLink>
<NavLink
to="troca-e-devolucao"
className={({ isActive }) =>
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
}>
Troca e Devolução
</NavLink>
<NavLink
to="seguranca-e-privacidade"
className={({ isActive }) =>
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
}>
Segurança e Privacidade
</NavLink>
<NavLink
to="contato"
className={({ isActive }) =>
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
}>
Contato
</NavLink>
</ul>
</nav>
<div className={styleInstitucional["content-right"]} >
<Outlet />
</div>
</div>
</>
)
}

23
src/routes.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Routes as ReactRouterRoutes, Route } from "react-router-dom"
import { Layout } from "./components/Layout"
import { Instituicional } from "./pages/Intitucional/Instituicional"
export const Routes = () => {
return (
<ReactRouterRoutes>
<Route path="/" element={<Layout />}>
<Route path="institucional" element={<Instituicional />}>
<Route path="sobre" element={<div>Red</div>} />
<Route path="forma-de-pagamento" element={<div>batata2</div>} />
<Route path="entrega" element={<div>batata3</div>} />
<Route path="troca-e-devolucao" element={<div>batata4</div>} />
<Route path="seguranca-e-privacidade" element={<div>batata5</div>} />
<Route path="contato" element={<div>batata6</div>} />
</Route>
</Route>
</ReactRouterRoutes>
)
}

20
yarn.lock
View File

@ -1612,6 +1612,11 @@
schema-utils "^3.0.0"
source-map "^0.7.3"
"@remix-run/router@1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.1.tgz#812edd4104a15a493dda1ccac0b352270d7a188c"
integrity sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==
"@rollup/plugin-babel@^5.2.0":
version "5.3.1"
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@ -8136,6 +8141,21 @@ react-refresh@^0.11.0:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
react-router-dom@^6.6.2:
version "6.6.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.6.2.tgz#bbf1f9b45855b218d22fc2d294b79408a084740a"
integrity sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==
dependencies:
"@remix-run/router" "1.2.1"
react-router "6.6.2"
react-router@6.6.2:
version "6.6.2"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.6.2.tgz#556f7b56cff7fe32c5c02429fef3fcb2ecd08111"
integrity sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==
dependencies:
"@remix-run/router" "1.2.1"
react-scripts@5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"