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

fix: corrige erro inicial das rotas do projeto

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-01-18 23:14:35 -03:00
parent b07ad66065
commit f3e844d4df
9 changed files with 103 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,10 +7,10 @@ export const HeaderBottom = () => {
<div className={styleHeader["header__bottom"]}>
<nav className={styleHeader["navBar__items"]}>
<Link className={styleHeader["list__items__link"]} to="/cursos">
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
Cursos
</Link>
<Link className={styleHeader["list__items__link"]} to="/saiba-mais">
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
Saiba Mais
</Link>
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">

10
src/components/Header/HeaderDesk/HeaderTop.tsx
View File

@ -10,21 +10,21 @@ export const HeaderTop = () => {
return (
<div className={styleHeader["header__top"]}>
<div className={styleHeader["container__header__top"]}>
<Link to="/" className={styleHeader["container__logo"]}>
<Link to="/institucional/sobre" className={styleHeader["container__logo"]}>
< img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} />
</Link>
<form className={styleHeader["container__search"]}>
<input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
<a className={styleHeader["container__search__link"]} href="/">
<Link className={styleHeader["container__search__link"]} to="/institucional/sobre">
<img className={styleHeader["container__search__link__img"]} src={search} alt="Icone de busca" />
</a>
</Link>
</form>
<div className={styleHeader["container__menu"]} >
<span className={styleHeader["container__menu__enter"]}>
<a href="/">Entrar</a>
<Link to="/institucional/sobre">Entrar</Link>
</span>
<span className={styleHeader["container__menu__cart"]}>
<Link to="/" >
<Link to="/institucional/sobre" >
<img src={cart} alt="icone de cart" />
</Link>
</span>

4
src/components/Header/HeaderMobile/BurguerMenu.tsx
View File

@ -30,10 +30,10 @@ export const BurguerMenu = ({ isOpenMenu, setisOpenMenu }: MenuMobile) => {
</div>
</div>
<nav className={styleHeader["navBar__items"]}>
<Link className={styleHeader["list__items__link"]} to="/cursos">
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
Cursos
</Link>
<Link className={styleHeader["list__items__link"]} to="/saiba-mais">
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
Saiba Mais
</Link>
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">

4
src/components/Header/HeaderMobile/HeaderMobile.tsx
View File

@ -23,13 +23,13 @@ export const HeaderMobile = () => {
</div>
<div className={styleHeader["container__menu"]} >
<span className={styleHeader["container__menu_cart"]}>
<a href="/" ><img src={cart} alt="icone de cart" /></a>
<a href="/institucional/sobre" ><img src={cart} alt="icone de cart" /></a>
</span>
</div>
</div>
<form className={styleHeader["container__search__mobile"]}>
<input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
<a className={styleHeader["container__search__link"]} href="/">
<a className={styleHeader["container__search__link"]} href="/institucional/sobre">
<img src={search} alt="Icone de busca" />
</a>
</form>

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

@ -0,0 +1,25 @@
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 >
)
}

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

@ -0,0 +1,50 @@
@import "../../variaveis";
.container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.main {
display: flex;
height: auto;
margin: 0 100px;
flex-direction: column;
@media (min-width: 3000px) {
min-height: 897px;
}
@media (max-width:$tablets) {
margin: 0 16px;
// z-index: -9;
}
h1 {
text-align: center;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: $color-black1;
@media (min-width:$full) {
font-size: 48px;
line-height: 56px;
}
}
}

16
src/pages/Home.tsx
View File

@ -1,7 +1,6 @@
import { Outlet } from "react-router-dom"
import { Footer } from "../components/Footer/Footer"
import { Header } from "../components/Header/Header"
import { BreadCrumb } from "../components/BreadCrumb/BreadCreumb"
import styles from "./styles.module.scss"
@ -10,15 +9,10 @@ import styles from "./styles.module.scss"
export const Home = () => {
return (
<div className={styles["container"]}>
<Header />
<BreadCrumb />
<main className={styles["main"]}>
<Outlet />
</main>
<Footer />
<h1>HOME</h1>
</div >
)
}

4
src/pages/Intitucional/Instituitional.tsx → src/pages/Intitucional/index.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import { NavLink, Outlet } from "react-router-dom";
import styleInstitucional from "./Instituitional.module.scss"
export const Instituitional = () => {
export const Institucional = () => {
return (
<>

14
src/routes.tsx
View File

@ -1,21 +1,25 @@
import { Routes as ReactRouterRoutes, Route } from "react-router-dom"
import { Routes as ReactRouterRoutes, Route, Navigate } from "react-router-dom"
import { Home } from "./pages/Home"
import { Contact } from "./pages/Intitucional/Contact"
import { Delivery } from "./pages/Intitucional/Delivery"
import { FormOfPayment } from "./pages/Intitucional/FormOfPayment"
import { Instituitional } from "./pages/Intitucional/Instituitional"
import { Institucional } from "./pages/Intitucional"
import { SecurityAndPrivacy } from "./pages/Intitucional/SecurityAndPrivacy"
import { About } from "./pages/Intitucional/About"
import { ExchangeAndEvolution } from "./pages/Intitucional/ExchangeAndEvolution"
import { Layout } from "./components/Layout"
export const Routes = () => {
return (
<ReactRouterRoutes>
<Route path="/" element={< Home />}>
< Route path="institucional" element={<Instituitional />} >
<Route path="/" element={<Layout />}>
<Route index element={<Navigate to="/institucional/sobre" replace />} />
<Route path="institucional" element={<Institucional />}>
<Route path="sobre" element={<About />} />
<Route path="forma-de-pagamento" element={<FormOfPayment />} />
<Route path="entrega" element={<Delivery />} />
@ -23,6 +27,8 @@ export const Routes = () => {
<Route path="seguranca-e-privacidade" element={<SecurityAndPrivacy />} />
<Route path="contato" element={<Contact />} />
</Route>
</Route>
</ReactRouterRoutes >
)