forked from M3-Academy/desafio-react-e-typescript
feat(pages): adiciona router para redirecionar as paginas
This commit is contained in:
parent
11f8f81502
commit
6c0e9f1ba6
95
src/App.scss
Normal file
95
src/App.scss
Normal file
@ -0,0 +1,95 @@
|
||||
@import "./components/Variables.scss";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.Container-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.TopContainer_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.MainConteiner {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
padding-bottom: 66px;
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
padding: 0 100px;
|
||||
margin-bottom: 47px;
|
||||
}
|
||||
|
||||
.Main_textArea {
|
||||
@media (min-width: 1025px) {
|
||||
width: 100%;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-family: $fontFamily;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color-gray-800;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.MainText {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: $fontFamily;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: $color-gray-500;
|
||||
|
||||
p {
|
||||
margin: 12px 0;
|
||||
color: $color-gray-500;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
font-family: $fontFamily;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
32
src/App.tsx
Normal file
32
src/App.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { Router } from "./router";
|
||||
import { Navegation } from "./components/Navegation";
|
||||
|
||||
import { ScreenSize } from "./components/DetectSize";
|
||||
|
||||
import { HeaderDesktop } from "./components/Header/HeaderDesktop";
|
||||
import { HeaderMobile } from "./components/Header/HeaderMobile";
|
||||
import { TopContainer } from "./components/Container-menu/TopContainer";
|
||||
import { MainFooter } from "./components/Footer/FooterMain";
|
||||
|
||||
import "./App.scss";
|
||||
|
||||
export const App = () => {
|
||||
return (
|
||||
ScreenSize(),
|
||||
(
|
||||
<>
|
||||
{window.innerWidth > 1024 ? <HeaderDesktop /> : <HeaderMobile />}
|
||||
<section className="Container-menu">
|
||||
<div className="TopContainer_wrapper">
|
||||
<TopContainer />
|
||||
</div>
|
||||
<div className="MainConteiner">
|
||||
<Navegation />
|
||||
<Router />
|
||||
</div>
|
||||
<MainFooter />
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
);
|
||||
};
|
15
src/index.tsx
Normal file
15
src/index.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { App } from "./App";
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById("root") as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
1
src/react-app-env.d.ts
vendored
Normal file
1
src/react-app-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="react-scripts" />
|
23
src/router.tsx
Normal file
23
src/router.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
|
||||
import { About } from "./pages/About";
|
||||
import { Payments } from "./pages/Payments";
|
||||
import { Delivery } from "./pages/Delivery";
|
||||
import { Form } from "./pages/Contact";
|
||||
import { Privacy } from "./pages/Privacy";
|
||||
import { Refund } from "./pages/Refund";
|
||||
|
||||
export const Router = () => {
|
||||
return (
|
||||
<>
|
||||
<Routes>
|
||||
<Route path="/" element={<About />} />
|
||||
<Route path="/Pagamentos" element={<Payments />} />
|
||||
<Route path="/Entrega" element={<Delivery />} />
|
||||
<Route path="/Devolução" element={<Refund />} />
|
||||
<Route path="/Segurança" element={<Privacy />} />
|
||||
<Route path="/Contatos" element={<Form />} />
|
||||
</Routes>
|
||||
</>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user