feat: link and directory improvements

Changing pages now happens via Link, directory has gotten a layout change with app becoming a starting point and every page requireing their own .tsx and .css file.
Components have also been added where reocurring componennts can be made and reapplied in the project.

ref: N25B-96

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.1.1",
-        "react-dom": "^19.1.1"
+        "react-dom": "^19.1.1",
+        "react-router": "^7.9.3"
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -56,6 +57,7 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -1423,6 +1425,7 @@
       "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1483,6 +1486,7 @@
       "integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.44.1",
         "@typescript-eslint/types": "8.44.1",
@@ -1735,6 +1739,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1853,6 +1858,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -1949,6 +1955,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "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",
@@ -2074,6 +2089,7 @@
       "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2895,6 +2911,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
       "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2904,6 +2921,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
       "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -2921,6 +2939,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.9.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.3.tgz",
+      "integrity": "sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3024,6 +3064,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",
@@ -3124,6 +3170,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3176,6 +3223,7 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3255,6 +3303,7 @@
       "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -3348,6 +3397,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-router": "^7.9.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

src/App.css

@@ -33,10 +33,34 @@
   }
 }
 
-.card {
+
-  padding: 2em;
+
+button.reset {
+  background-color: crimson;
+  color: white;
+}
+button.reset:hover {
+  background-color: darkred;
 }
 
-.read-the-docs {
+button.movePage {
-  color: #888;
+  position: fixed;          /* Position the button relative to the viewport (screen),
+                               not inside its parent. It stays in place even when you scroll. */
+
+  top: 50%;                 /* Place the button halfway down from the top of the screen. */
+                   /* Stick the button to the left edge of the screen. */
+  border: 3px solid black;
+  outline: 1px solid white;
+  transform: translateY(-50%); 
+  background-color: aquamarine;
+  color: white;
+}
+button.movePage.left{
+  left: 5%;
+}
+button.movePage.right{
+  right: 5%;
+}
+button.movePage:hover{
+  background-color: rgb(0, 176, 176);
 }

src/App.tsx

@@ -1,34 +1,15 @@
-import { useState } from 'react'
+import { Routes, Route } from 'react-router'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
+import TemplatePage from './pages/TemplatePage/Template.tsx'
+import Home from './pages/Home/Home.tsx'
 
-function App() {
+function App(){
-  const [count, setCount] = useState(0)
+  
-
   return (
-    <>
+    <Routes>
-      <div>
+      <Route path="/" element={<Home />} />
-        <a href="https://vite.dev" target="_blank">
+      <Route path="/Template" element={<TemplatePage />} />
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+    </Routes>
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
   )
 }
 

src/components/components.tsx

@@ -0,0 +1,20 @@
+// src/components/Counter.tsx
+import { useState } from 'react'
+//import style from './Counter.module.css' // optional, if you want a CSS module for reset button
+import '../App.css'
+
+function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="card">
+      <button onClick={() => setCount((count) => count + 3)}>
+        count is {count}
+      </button>
+      <button className='reset' onClick={() => setCount(0)}>
+        Reset Counter
+      </button>
+    </div>
+  )
+}
+export default Counter

src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router'
 import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

src/pages/Home/Home.module.css

@@ -0,0 +1,7 @@
+
+.read_the_docs {
+  color: #888;
+}
+.card {
+  padding: 2em;
+}

src/pages/Home/Home.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import reactLogo from '../../assets/react.svg'
+import viteLogo from '../../assets/vite.svg'
+import style from './Home.module.css'
+import Counter from '../../components/components.tsx'
+
+function Home() {
+  
+
+
+  return (
+    <>
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      
+        <Counter />
+        <Link to = '/Template'>
+            <button className='movePage right' onClick={() : void => {}}>
+            Page Cool --{'>'}
+            </button>
+        </Link>
+        
+        <p>
+            Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      
+      <p className={style.read_the_docs}>
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default Home

src/pages/TemplatePage/Template.module.css

@@ -0,0 +1,4 @@
+button.reset:hover {
+  background-color: yellow;
+}
+

src/pages/TemplatePage/Template.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import Counter from '../../components/components.tsx'
+import style from './Template.module.css'
+
+//this is your css file where you can style your buttons and such
+//you can still use css parts from App.css, but also overwrite them
+
+function TemplatePage() {
+  
+
+  return (
+    <>
+      <Counter />
+      <Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
+        <button className= 'movePage left' onClick={() :void => {}}>
+          Page {'<'}-- Go Home
+        </button>
+      </Link>
+    </>
+  )
+}
+
+export default TemplatePage