From ab6fb8f96f8e32fc5bfe4f19ffb82f3ec96d99c4 Mon Sep 17 00:00:00 2001
From: dorian melenotte <dorian.melenotte@epitech.eu>
Date: Wed, 7 Aug 2024 14:39:33 +0200
Subject: [PATCH] ADD: routing of the pages

---
 package.json             |  3 ++-
 src/component/Body.jsx   |  2 +-
 src/component/Head.jsx   | 41 ++++++++++++++++++++++++++++------------
 src/component/Navbar.jsx |  4 ----
 src/files/About.jsx      |  0
 src/files/Accueil.jsx    | 17 +++++++++++++++++
 src/files/Blog.jsx       |  0
 src/files/Downloads.jsx  |  0
 src/files/Help.jsx       |  0
 src/files/Product.jsx    |  0
 src/files/Register.jsx   |  5 +++++
 src/files/Serveurs.jsx   |  0
 src/files/Sign_in.jsx    |  3 +++
 src/main.jsx             | 17 ++++-------------
 src/services/Router.jsx  | 19 +++++++++++++++++++
 15 files changed, 80 insertions(+), 31 deletions(-)
 create mode 100644 src/files/About.jsx
 create mode 100644 src/files/Accueil.jsx
 create mode 100644 src/files/Blog.jsx
 create mode 100644 src/files/Downloads.jsx
 create mode 100644 src/files/Help.jsx
 create mode 100644 src/files/Product.jsx
 create mode 100644 src/files/Register.jsx
 create mode 100644 src/files/Serveurs.jsx
 create mode 100644 src/files/Sign_in.jsx
 create mode 100644 src/services/Router.jsx

diff --git a/package.json b/package.json
index 99e92b0..bdbb394 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "@emotion/styled": "^11.13.0",
     "framer-motion": "^11.3.21",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/src/component/Body.jsx b/src/component/Body.jsx
index 8315f78..88fa08b 100644
--- a/src/component/Body.jsx
+++ b/src/component/Body.jsx
@@ -1,7 +1,7 @@
 export function Body() {
   return (
     <>
-      <h2>la consistance de gmoker</h2>
+      <h2 style={{ fontSize: "20px" }}>la consistance de gmoker</h2>
       <p> bla bla bla gmoker c'est genial vous aller voir</p>
     </>
   );
diff --git a/src/component/Head.jsx b/src/component/Head.jsx
index 9461006..064eed4 100644
--- a/src/component/Head.jsx
+++ b/src/component/Head.jsx
@@ -1,6 +1,5 @@
-import chat from ".././assets/chat.jpg";
-import { Button, ButtonGroup } from "@chakra-ui/react";
-import { Flex, Spacer } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
+import { Link } from "react-router-dom";
 
 const button_style = {
   colorScheme: "cyan",
@@ -10,17 +9,35 @@ export function Header() {
   return (
     <Flex justify={"space-between"}>
       <Flex justifyContent={"left"} gap={1} marginTop={1} width={"500px"}>
-        <Button {...button_style}>Aceuil</Button>
-        <Button {...button_style}>About</Button>
-        <Button {...button_style}>Product</Button>
-        <Button {...button_style}>Blog</Button>
-        <Button {...button_style}>Serveurs</Button>
-        <Button {...button_style}>Dowloads</Button>
-        <Button {...button_style}>Help</Button>
+        <Link to="/accueil">
+          <Button {...button_style}>Accueil</Button>
+        </Link>
+        <Link to="/about">
+          <Button {...button_style}>About</Button>
+        </Link>
+        <Link to="/product">
+          <Button {...button_style}>Product</Button>
+        </Link>
+        <Link to="/blog">
+          <Button {...button_style}>Blog</Button>
+        </Link>
+        <Link to="/serveurs">
+          <Button {...button_style}>Serveurs</Button>
+        </Link>
+        <Link to="/downloads">
+          <Button {...button_style}>Downloads</Button>
+        </Link>
+        <Link to="/help">
+          <Button {...button_style}>Help</Button>
+        </Link>
       </Flex>
       <Flex justify={"right"} gap={1} marginTop={1} width={"500px"}>
-        <Button {...button_style}>Get started</Button>
-        <Button {...button_style}>Account</Button>
+        <Link to="/sign-in">
+          <Button {...button_style}>Sign in</Button>
+        </Link>
+        <Link to="/register">
+          <Button {...button_style}>Register</Button>
+        </Link>
       </Flex>
     </Flex>
   );
diff --git a/src/component/Navbar.jsx b/src/component/Navbar.jsx
index 301dc00..4df1653 100644
--- a/src/component/Navbar.jsx
+++ b/src/component/Navbar.jsx
@@ -1,10 +1,6 @@
 export function Navbar() {
-  /* console.log("coucou les zamis");
-  const sex = 5; */
-
   return (
     <p style={{ textAlign: "center", color: "red", background: "green" }}>
-      {" "}
       Welcome to gmoker, the the website is under construction
     </p>
   );
diff --git a/src/files/About.jsx b/src/files/About.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/files/Accueil.jsx b/src/files/Accueil.jsx
new file mode 100644
index 0000000..fcee8cb
--- /dev/null
+++ b/src/files/Accueil.jsx
@@ -0,0 +1,17 @@
+import { Navbar } from ".././component/Navbar.jsx";
+import { App } from "../component/App.jsx";
+import { Body } from "../component/Body.jsx";
+import { Footer } from "../component/Footer.jsx";
+import { Header } from "../component/Head.jsx";
+
+export function Accueil() {
+  return (
+    <>
+      <Navbar />
+      <Header />
+      <App />
+      <Body />
+      <Footer />
+    </>
+  );
+}
diff --git a/src/files/Blog.jsx b/src/files/Blog.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/files/Downloads.jsx b/src/files/Downloads.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/files/Help.jsx b/src/files/Help.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/files/Product.jsx b/src/files/Product.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/files/Register.jsx b/src/files/Register.jsx
new file mode 100644
index 0000000..3fe93ba
--- /dev/null
+++ b/src/files/Register.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export function Register() {
+  return <h1>Inscription</h1>;
+}
diff --git a/src/files/Serveurs.jsx b/src/files/Serveurs.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/files/Sign_in.jsx b/src/files/Sign_in.jsx
new file mode 100644
index 0000000..8727f06
--- /dev/null
+++ b/src/files/Sign_in.jsx
@@ -0,0 +1,3 @@
+export function SignIn() {
+  return <h1>Connexion</h1>;
+}
diff --git a/src/main.jsx b/src/main.jsx
index ad4b8df..4de39e2 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,14 +1,9 @@
+import { ChakraProvider } from "@chakra-ui/react";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { ChakraProvider } from "@chakra-ui/react";
-import { App } from "./component/App.jsx";
-import { Navbar } from "./component/Navbar.jsx";
-import { Body } from "./component/Body.jsx";
-import { Footer } from "./component/Footer.jsx";
-import { Header } from "./component/Head.jsx";
+import { RouterProvider } from "react-router-dom";
 import back_img from "./assets/img_site.jpg";
-import chat from "./assets/chat.jpg";
-
+import { router } from "./services/Router.jsx";
 function buttoncaller(argv) {
   console.log(argv);
   alert(argv);
@@ -25,11 +20,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
           backgroundPosition: "center",
         }}
       >
-        <Navbar />
-        <Header />
-        <App />
-        <Body />
-        <Footer />
+        <RouterProvider router={router} />
       </div>
     </ChakraProvider>
   </>
diff --git a/src/services/Router.jsx b/src/services/Router.jsx
new file mode 100644
index 0000000..63e3527
--- /dev/null
+++ b/src/services/Router.jsx
@@ -0,0 +1,19 @@
+import { createBrowserRouter } from "react-router-dom";
+import { Accueil } from "../files/Accueil";
+import { Register } from "../files/Register";
+import { SignIn } from "../files/Sign_in";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Accueil />,
+  },
+  {
+    path: "/sign-in",
+    element: <SignIn />,
+  },
+  {
+    path: "/register",
+    element: <Register />,
+  },
+]);