From c2db6b9e38ade994ee8814441237f427fe23b8a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Wed, 28 Dec 2022 22:27:24 -0300 Subject: [PATCH] feat: Adiciona router na navegacao --- react-project/package-lock.json | 61 +++++++++++++++++++ react-project/package.json | 1 + react-project/src/App.tsx | 1 - .../src/assets/styles/Home.module.scss | 27 ++++++++ react-project/src/assets/styles/global.scss | 9 ++- react-project/src/components/Contato.tsx | 7 +++ react-project/src/components/Entrega.tsx | 7 +++ react-project/src/components/Footer.tsx | 7 +++ react-project/src/components/Header.tsx | 7 +++ react-project/src/components/Navigation.tsx | 31 ++++++++++ react-project/src/components/Pagamento.tsx | 7 +++ react-project/src/components/Seguranca.tsx | 7 +++ react-project/src/components/Sobre.tsx | 7 +++ react-project/src/components/Troca.tsx | 7 +++ react-project/src/index.tsx | 5 +- react-project/src/pages/Home.tsx | 30 ++++++++- 16 files changed, 216 insertions(+), 5 deletions(-) create mode 100644 react-project/src/components/Contato.tsx create mode 100644 react-project/src/components/Entrega.tsx create mode 100644 react-project/src/components/Footer.tsx create mode 100644 react-project/src/components/Header.tsx create mode 100644 react-project/src/components/Navigation.tsx create mode 100644 react-project/src/components/Pagamento.tsx create mode 100644 react-project/src/components/Seguranca.tsx create mode 100644 react-project/src/components/Sobre.tsx create mode 100644 react-project/src/components/Troca.tsx diff --git a/react-project/package-lock.json b/react-project/package-lock.json index 64be4f1..3c2b312 100644 --- a/react-project/package-lock.json +++ b/react-project/package-lock.json @@ -19,6 +19,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4", @@ -3115,6 +3116,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz", + "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==", + "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", @@ -15085,6 +15094,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz", + "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==", + "dependencies": { + "@remix-run/router": "1.2.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz", + "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==", + "dependencies": { + "@remix-run/router": "1.2.1", + "react-router": "6.6.1" + }, + "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", @@ -20553,6 +20592,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz", + "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -29166,6 +29210,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz", + "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==", + "requires": { + "@remix-run/router": "1.2.1" + } + }, + "react-router-dom": { + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz", + "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==", + "requires": { + "@remix-run/router": "1.2.1", + "react-router": "6.6.1" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/react-project/package.json b/react-project/package.json index d75b7e7..0a37ce1 100644 --- a/react-project/package.json +++ b/react-project/package.json @@ -14,6 +14,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4", diff --git a/react-project/src/App.tsx b/react-project/src/App.tsx index caac78c..6bfe770 100644 --- a/react-project/src/App.tsx +++ b/react-project/src/App.tsx @@ -6,7 +6,6 @@ import { Home } from "./pages/Home"; function App() { return (
-

hello world

); diff --git a/react-project/src/assets/styles/Home.module.scss b/react-project/src/assets/styles/Home.module.scss index 59ec045..b8f5ccf 100644 --- a/react-project/src/assets/styles/Home.module.scss +++ b/react-project/src/assets/styles/Home.module.scss @@ -1,3 +1,30 @@ +.main { + border: 1px solid red; + + header { + margin-bottom: 50px; + } + + .navigation { + display: flex; + + &__items { + list-style: none; + margin-left: 20px; + + a { + text-decoration: none; + /*color: $black;*/ + } + } + } + + footer { + margin-top: 50px; + } +} + .testeh3 { color: red; + margin-bottom: 20px; } diff --git a/react-project/src/assets/styles/global.scss b/react-project/src/assets/styles/global.scss index ccf22a0..f42fa42 100644 --- a/react-project/src/assets/styles/global.scss +++ b/react-project/src/assets/styles/global.scss @@ -1,3 +1,8 @@ -h1 { - color: blue; +* { + box-sizing: border-box; + padding: 0; + margin: 0; } + +//Colors +$black: #000; diff --git a/react-project/src/components/Contato.tsx b/react-project/src/components/Contato.tsx new file mode 100644 index 0000000..859d6bc --- /dev/null +++ b/react-project/src/components/Contato.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Contato = () => { + return
contatooo
; +}; + +export { Contato }; diff --git a/react-project/src/components/Entrega.tsx b/react-project/src/components/Entrega.tsx new file mode 100644 index 0000000..cbd669e --- /dev/null +++ b/react-project/src/components/Entrega.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Entrega = () => { + return
entregaa
; +}; + +export { Entrega }; diff --git a/react-project/src/components/Footer.tsx b/react-project/src/components/Footer.tsx new file mode 100644 index 0000000..82a9fa5 --- /dev/null +++ b/react-project/src/components/Footer.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Footer = () => { + return ; +}; + +export { Footer }; diff --git a/react-project/src/components/Header.tsx b/react-project/src/components/Header.tsx new file mode 100644 index 0000000..b4c852b --- /dev/null +++ b/react-project/src/components/Header.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Header = () => { + return
Header
; +}; + +export { Header }; diff --git a/react-project/src/components/Navigation.tsx b/react-project/src/components/Navigation.tsx new file mode 100644 index 0000000..9e1a195 --- /dev/null +++ b/react-project/src/components/Navigation.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import { NavLink } from "react-router-dom"; + +import styles from "../assets/styles/Home.module.scss"; + +const Navigation = () => { + return ( + + ); +}; + +export { Navigation }; diff --git a/react-project/src/components/Pagamento.tsx b/react-project/src/components/Pagamento.tsx new file mode 100644 index 0000000..b635d92 --- /dev/null +++ b/react-project/src/components/Pagamento.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Pagamento = () => { + return
formas de pagamentoooooo
; +}; + +export { Pagamento }; diff --git a/react-project/src/components/Seguranca.tsx b/react-project/src/components/Seguranca.tsx new file mode 100644 index 0000000..019967d --- /dev/null +++ b/react-project/src/components/Seguranca.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Seguranca = () => { + return
segggg
; +}; + +export { Seguranca }; diff --git a/react-project/src/components/Sobre.tsx b/react-project/src/components/Sobre.tsx new file mode 100644 index 0000000..4f4e515 --- /dev/null +++ b/react-project/src/components/Sobre.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Sobre = () => { + return
sobreeee
; +}; + +export { Sobre }; diff --git a/react-project/src/components/Troca.tsx b/react-project/src/components/Troca.tsx new file mode 100644 index 0000000..0f2f1bd --- /dev/null +++ b/react-project/src/components/Troca.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Troca = () => { + return
trocaaaa
; +}; + +export { Troca }; diff --git a/react-project/src/index.tsx b/react-project/src/index.tsx index b8bbae3..02b3669 100644 --- a/react-project/src/index.tsx +++ b/react-project/src/index.tsx @@ -2,12 +2,15 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; +import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( - + + + ); diff --git a/react-project/src/pages/Home.tsx b/react-project/src/pages/Home.tsx index 5466a41..097b2cb 100644 --- a/react-project/src/pages/Home.tsx +++ b/react-project/src/pages/Home.tsx @@ -2,10 +2,38 @@ import React from "react"; import styles from "../assets/styles/Home.module.scss"; +import { Header } from "../components/Header"; +import { Navigation } from "../components/Navigation"; +import { Footer } from "../components/Footer"; + +import { Routes, Route } from "react-router-dom"; + +import { Sobre } from "../components/Sobre"; +import { Pagamento } from "../components/Pagamento"; +import { Entrega } from "../components/Entrega"; +import { Troca } from "../components/Troca"; +import { Seguranca } from "../components/Seguranca"; +import { Contato } from "../components/Contato"; + const Home = () => { return ( -
+
+

Teste HOME

+ +
+ + + } /> + } /> + } /> + } /> + } /> + } /> + +
+ +
); };