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

feat adiciona react-router no header

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-01-20 19:50:58 -03:00
parent 854f3bb934
commit c4e3e0e938
13 changed files with 126 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
package-lock.json generated
View File

@ -21,6 +21,7 @@
"react-dom": "^18.2.0",
"react-headless-accordion": "^1.0.2",
"react-modal": "^3.16.1",
"react-router-dom": "^6.7.0",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
"scss": "^0.2.4",
@ -3086,6 +3087,14 @@
}
}
},
"node_modules/@remix-run/router": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz",
"integrity": "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA==",
"engines": {
"node": ">=14"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -14312,6 +14321,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz",
"integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==",
"dependencies": {
"@remix-run/router": "1.3.0"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz",
"integrity": "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg==",
"dependencies": {
"@remix-run/router": "1.3.0",
"react-router": "6.7.0"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@ -19372,6 +19411,11 @@
"source-map": "^0.7.3"
}
},
"@remix-run/router": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz",
"integrity": "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA=="
},
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -27388,6 +27432,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz",
"integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==",
"requires": {
"@remix-run/router": "1.3.0"
}
},
"react-router-dom": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz",
"integrity": "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg==",
"requires": {
"@remix-run/router": "1.3.0",
"react-router": "6.7.0"
}
},
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"react-dom": "^18.2.0",
"react-headless-accordion": "^1.0.2",
"react-modal": "^3.16.1",
"react-router-dom": "^6.7.0",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
"scss": "^0.2.4",

17
src/App.tsx
View File

@ -1,17 +0,0 @@
import { Header } from "./components/header/header";
import { MainContent } from "./components/main/main-content";
import { Footer } from "./components/footer/footer";
import { FloatingButtons } from "./components/floating-buttons/floating-buttons";
function App() {
return (
<div className="App">
<Header />
<MainContent />
<Footer />
<FloatingButtons />
</div>
);
}
export default App;

2
src/components/footer/footer.tsx
View File

@ -1,7 +1,7 @@
import style from "./footer.module.scss";
import { InfoAgencia } from "./info-agencia/info-agencia";
import { Newsletter } from "../newsletter/newsletter";
import { Newsletter } from "./newsletter/newsletter";
import { InfoAgenciaMobile } from "./info-agencia-mobile/info-agencia-mobile";
import boleto from "./assets/Boleto.png";

0
src/components/newsletter/newsletter.module.scss → src/components/footer/newsletter/newsletter.module.scss
View File

0
src/components/newsletter/newsletter.tsx → src/components/footer/newsletter/newsletter.tsx
View File

16
src/components/header/header-menu/header-menu.tsx
View File

@ -1,12 +1,16 @@
import style from "./header-menu.module.scss";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
export function HeaderMenu() {
return (
<div className={style.headerMenu}>
<div className={style.headerMenuContainer}>
<a href="/cursos">CURSOS</a>
<a href="/saiba-mais">SAIBA MAIS</a>
<a href="/institucionais">INSTITUCIONAIS</a>
<Router>
<div className={style.headerMenu}>
<div className={style.headerMenuContainer}>
<Link to="/cursos"> CURSOS</Link>
<Link to="/saiba-mais"> SAIBA MAIS</Link>
<Link to="/institucionais"> INSTITUCIONAIS</Link>
</div>
</div>
</div>
</Router>
);
}

3
src/components/header/header.module.scss
View File

@ -79,13 +79,14 @@
align-items: center;
gap: 55px;
& span {
& a {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #ffffff;
text-decoration: none;
@media (min-width: 2500px) {
font-size: 28px;

37
src/components/header/header.tsx
View File

@ -3,6 +3,7 @@ import { HeaderRoute } from "./header-route/header-route";
import { HeaderHamburger } from "./header-hamburger/header-hamburger";
import { MenuAberto } from "./header-hamburger/menu-aberto";
import { useState } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import style from "./header.module.scss";
import logoM3 from "./assets/logo.png";
@ -13,30 +14,32 @@ export function Header() {
const [openModal, setOpenModal] = useState(false);
return (
<>
<header className={style.header}>
<div className={style.headerMainContainer}>
<div className={style.headerContainer}>
<div className={style.headerLogoContainer}>
<img src={logoM3} alt="" />
</div>
<div className={style.headerSearch}>
<input type="text" placeholder="Buscar..." />
<a href="/">
{" "}
<Router>
<header className={style.header}>
<div className={style.headerMainContainer}>
<div className={style.headerContainer}>
<div className={style.headerLogoContainer}>
<a href="/home">
{" "}
<img src={logoM3} alt=""></img>
</a>
</div>
<div className={style.headerSearch}>
<input type="text" placeholder="Buscar..." />
<img
className={style.socialIcons}
src={searchIcon}
alt=""
></img>
</a>
</div>
<div className={style.headerSafebuy}>
<span>ENTRAR</span>
<img src={cartBuy} alt="" />
</div>
<div className={style.headerSafebuy}>
<Link to="entrar">ENTRAR</Link>
<img src={cartBuy} alt="" />
</div>
</div>
</div>
</div>
</header>
</header>
</Router>
<HeaderHamburger openModal={() => setOpenModal(true)} />
<MenuAberto
isOpen={openModal}

13
src/global.css
View File

@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

13
src/global.module.scss Normal file
View File

@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

6
src/index.tsx
View File

@ -1,13 +1,13 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "./global.css";
import App from "./App";
import "./global.module.scss";
import { Home } from "./pages/Home";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<App />
<Home />
</React.StrictMode>
);

15
src/pages/Home.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Header } from "../components/header/header";
import { MainContent } from "../components/main/main-content";
import { Footer } from "../components/footer/footer";
import { FloatingButtons } from "../components/floating-buttons/floating-buttons";
export function Home() {
return (
<div className="App">
<Header />
<MainContent />
<Footer />
<FloatingButtons />
</div>
);
}