feat: Adiciona router na navegacao

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",

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",

react-project/src/App.tsx

@@ -6,7 +6,6 @@ import { Home } from "./pages/Home";
 function App() {
   return (
     <div>
-      <h1>hello world</h1>
       <Home />
     </div>
   );

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;
 }

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;

react-project/src/components/Contato.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Contato = () => {
+  return <div>contatooo</div>;
+};
+
+export { Contato };

react-project/src/components/Entrega.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Entrega = () => {
+  return <div>entregaa</div>;
+};
+
+export { Entrega };

react-project/src/components/Footer.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Footer = () => {
+  return <footer>Footer</footer>;
+};
+
+export { Footer };

react-project/src/components/Header.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Header = () => {
+  return <header>Header</header>;
+};
+
+export { Header };

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 (
+    <ul className={styles["navigation__items"]}>
+      <li className={styles["navigation__item"]}>
+        <NavLink to="/sobre">Sobre</NavLink>
+      </li>
+      <li className={styles["navigation__item"]}>
+        <NavLink to="/pagamento">Forma de Pagamento</NavLink>
+      </li>
+      <li className={styles["navigation__item"]}>
+        <NavLink to="/entrega">Entrega</NavLink>
+      </li>
+      <li className={styles["navigation__item"]}>
+        <NavLink to="/troca">Troca e Devolução</NavLink>
+      </li>
+      <li className={styles["navigation__item"]}>
+        <NavLink to="/seguranca">Segurança e Privacidade</NavLink>
+      </li>
+      <li className={styles["navigation__item"]}>
+        <NavLink to="/contato">Contato</NavLink>
+      </li>
+    </ul>
+  );
+};
+
+export { Navigation };

react-project/src/components/Pagamento.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Pagamento = () => {
+  return <div>formas de pagamentoooooo</div>;
+};
+
+export { Pagamento };

react-project/src/components/Seguranca.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Seguranca = () => {
+  return <div>segggg</div>;
+};
+
+export { Seguranca };

react-project/src/components/Sobre.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Sobre = () => {
+  return <div>sobreeee</div>;
+};
+
+export { Sobre };

react-project/src/components/Troca.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Troca = () => {
+  return <div>trocaaaa</div>;
+};
+
+export { Troca };

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(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );

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 (
-    <div>
+    <div className={styles["main"]}>
+      <Header />
       <h3 className={styles["testeh3"]}>Teste HOME</h3>
+
+      <div className={styles["navigation"]}>
+        <Navigation />
+        <Routes>
+          <Route path="/sobre" element={<Sobre />} />
+          <Route path="/pagamento" element={<Pagamento />} />
+          <Route path="/entrega" element={<Entrega />} />
+          <Route path="/troca" element={<Troca />} />
+          <Route path="/seguranca" element={<Seguranca />} />
+          <Route path="/contato" element={<Contato />} />
+        </Routes>
+      </div>
+
+      <Footer />
     </div>
   );
 };