From e8d0f42b7e67e7bf425532f7eee755546a13bba4 Mon Sep 17 00:00:00 2001 From: Jeynox Date: Wed, 12 Feb 2025 17:11:40 +0100 Subject: [PATCH] =?UTF-8?q?ajout=20des=20diff=C3=A9rents=20fichiers=20(pag?= =?UTF-8?q?es=20et=20dossiers)=20et=20mise=20en=20place=20du=20router?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/index.html | 2 +- frontend/package-lock.json | 70 ++++++++++++++++++++++- frontend/package.json | 3 +- frontend/src/App.css | 42 -------------- frontend/src/App.tsx | 52 +++++------------ frontend/src/assets/react.svg | 1 - frontend/src/components/Global/Header.tsx | 0 frontend/src/components/Global/header.css | 0 frontend/src/components/Navbar/Navbar.tsx | 0 frontend/src/components/Navbar/navbar.css | 0 frontend/src/index.css | 68 ---------------------- frontend/src/main.tsx | 19 +++--- frontend/src/pages/Layout.tsx | 11 ++++ frontend/src/pages/home/Home.tsx | 10 ++++ frontend/src/pages/home/home.css | 0 15 files changed, 119 insertions(+), 159 deletions(-) delete mode 100644 frontend/src/App.css delete mode 100644 frontend/src/assets/react.svg create mode 100644 frontend/src/components/Global/Header.tsx create mode 100644 frontend/src/components/Global/header.css create mode 100644 frontend/src/components/Navbar/Navbar.tsx create mode 100644 frontend/src/components/Navbar/navbar.css delete mode 100644 frontend/src/index.css create mode 100644 frontend/src/pages/Layout.tsx create mode 100644 frontend/src/pages/home/Home.tsx create mode 100644 frontend/src/pages/home/home.css diff --git a/frontend/index.html b/frontend/index.html index e0ef3be..de6d34e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,5 +1,5 @@ - + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c10668d..c54979f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^7.1.5" }, "devDependencies": { "@eslint/js": "^9.19.0", @@ -1277,6 +1278,12 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -1733,6 +1740,15 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -2627,6 +2643,46 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.1.5", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz", + "integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.1.5", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.5.tgz", + "integrity": "sha512-/4f9+up0Qv92D3bB8iN5P1s3oHAepSGa9h5k6tpTFlixTTskJZwKGhJ6vRJ277tLD1zuaZTt95hyGWV1Z37csQ==", + "license": "MIT", + "dependencies": { + "react-router": "7.1.5" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2721,6 +2777,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -2799,6 +2861,12 @@ "typescript": ">=4.8.4" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index eedddac..08af5f1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^7.1.5" }, "devDependencies": { "@eslint/js": "^9.19.0", diff --git a/frontend/src/App.css b/frontend/src/App.css deleted file mode 100644 index f44fb79..0000000 --- a/frontend/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 30b9871..efcb76a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,39 +1,17 @@ -import { useState } from 'react'; -import reactLogo from './assets/react.svg'; -import viteLogo from '/vite.svg'; -import './App.css'; +import { Routes, Route, BrowserRouter } from 'react-router-dom'; +import Layout from './pages/Layout'; +import Home from './pages/home/Home'; -function App() { - const [count, setCount] = useState(0); +const App = () => { + return ( + + + }> + }/> + + + + ); +}; - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ); -} - -export default App; +export default App; \ No newline at end of file diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/frontend/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/components/Global/Header.tsx b/frontend/src/components/Global/Header.tsx new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/Global/header.css b/frontend/src/components/Global/header.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/Navbar/Navbar.tsx b/frontend/src/components/Navbar/Navbar.tsx new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/Navbar/navbar.css b/frontend/src/components/Navbar/navbar.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/index.css b/frontend/src/index.css deleted file mode 100644 index 279fff5..0000000 --- a/frontend/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 7825095..9c1b500 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,10 +1,13 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; -import './index.css'; -import App from './App.tsx'; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; -createRoot(document.getElementById('root')!).render( - - - , +const rootElement = document.getElementById('root') as HTMLElement; + +const root = ReactDOM.createRoot(rootElement); + +root.render( + + + ); diff --git a/frontend/src/pages/Layout.tsx b/frontend/src/pages/Layout.tsx new file mode 100644 index 0000000..4382e5a --- /dev/null +++ b/frontend/src/pages/Layout.tsx @@ -0,0 +1,11 @@ +import { Outlet } from "react-router-dom" + +const Layout = () => { + return( +
+ +
+ ) +} + +export default Layout \ No newline at end of file diff --git a/frontend/src/pages/home/Home.tsx b/frontend/src/pages/home/Home.tsx new file mode 100644 index 0000000..787e834 --- /dev/null +++ b/frontend/src/pages/home/Home.tsx @@ -0,0 +1,10 @@ +const Home = () => { + return ( +
+

Home

+

Welcome to the home page!

+
+ ); +} + +export default Home; \ No newline at end of file diff --git a/frontend/src/pages/home/home.css b/frontend/src/pages/home/home.css new file mode 100644 index 0000000..e69de29