gmoker/gmokercom
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: routing of the pages

Browse Source
This commit is contained in:
dorian melenotte 2024-08-07 14:39:33 +02:00
parent 50cd8ea5a5
commit ab6fb8f96f
15 changed files with 80 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -16,7 +16,8 @@
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",
"framer-motion": "^11.3.21", "framer-motion": "^11.3.21",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1",
"react-router-dom": "^6.26.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.3.3", "@types/react": "^18.3.3",

2
src/component/Body.jsx
View File

@ -1,7 +1,7 @@
export function Body() { export function Body() {
return ( 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> <p> bla bla bla gmoker c'est genial vous aller voir</p>
</> </>
); );

41
src/component/Head.jsx
View File

@ -1,6 +1,5 @@
import chat from ".././assets/chat.jpg"; import { Button, Flex } from "@chakra-ui/react";
import { Button, ButtonGroup } from "@chakra-ui/react"; import { Link } from "react-router-dom";
import { Flex, Spacer } from "@chakra-ui/react";
const button_style = { const button_style = {
colorScheme: "cyan", colorScheme: "cyan",
@ -10,17 +9,35 @@ export function Header() {
return ( return (
<Flex justify={"space-between"}> <Flex justify={"space-between"}>
<Flex justifyContent={"left"} gap={1} marginTop={1} width={"500px"}> <Flex justifyContent={"left"} gap={1} marginTop={1} width={"500px"}>
<Button {...button_style}>Aceuil</Button> <Link to="/accueil">
<Button {...button_style}>About</Button> <Button {...button_style}>Accueil</Button>
<Button {...button_style}>Product</Button> </Link>
<Button {...button_style}>Blog</Button> <Link to="/about">
<Button {...button_style}>Serveurs</Button> <Button {...button_style}>About</Button>
<Button {...button_style}>Dowloads</Button> </Link>
<Button {...button_style}>Help</Button> <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>
<Flex justify={"right"} gap={1} marginTop={1} width={"500px"}> <Flex justify={"right"} gap={1} marginTop={1} width={"500px"}>
<Button {...button_style}>Get started</Button> <Link to="/sign-in">
<Button {...button_style}>Account</Button> <Button {...button_style}>Sign in</Button>
</Link>
<Link to="/register">
<Button {...button_style}>Register</Button>
</Link>
</Flex> </Flex>
</Flex> </Flex>
); );

4
src/component/Navbar.jsx
View File

@ -1,10 +1,6 @@
export function Navbar() { export function Navbar() {
/* console.log("coucou les zamis");
const sex = 5; */
return ( return (
<p style={{ textAlign: "center", color: "red", background: "green" }}> <p style={{ textAlign: "center", color: "red", background: "green" }}>
{" "}
Welcome to gmoker, the the website is under construction Welcome to gmoker, the the website is under construction
</p> </p>
); );

0
src/files/About.jsx Normal file
View File

17
src/files/Accueil.jsx Normal file
View File

@ -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 />
</>
);
}

0
src/files/Blog.jsx Normal file
View File

0
src/files/Downloads.jsx Normal file
View File

0
src/files/Help.jsx Normal file
View File

0
src/files/Product.jsx Normal file
View File

5
src/files/Register.jsx Normal file
View File

@ -0,0 +1,5 @@
import React from "react";
export function Register() {
return <h1>Inscription</h1>;
}

0
src/files/Serveurs.jsx Normal file
View File

3
src/files/Sign_in.jsx Normal file
View File

@ -0,0 +1,3 @@
export function SignIn() {
return <h1>Connexion</h1>;
}

17
src/main.jsx
View File

@ -1,14 +1,9 @@
import { ChakraProvider } from "@chakra-ui/react";
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react"; import { RouterProvider } from "react-router-dom";
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 back_img from "./assets/img_site.jpg"; import back_img from "./assets/img_site.jpg";
import chat from "./assets/chat.jpg"; import { router } from "./services/Router.jsx";
function buttoncaller(argv) { function buttoncaller(argv) {
console.log(argv); console.log(argv);
alert(argv); alert(argv);
@ -25,11 +20,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
backgroundPosition: "center", backgroundPosition: "center",
}} }}
> >
<Navbar /> <RouterProvider router={router} />
<Header />
<App />
<Body />
<Footer />
</div> </div>
</ChakraProvider> </ChakraProvider>
</> </>

19
src/services/Router.jsx Normal file
View File

@ -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 />,
},
]);