About page + functionality to change pages

PTG/package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-router": "^8.3.1",
+    "react-router-dom": "^7.18.3"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",

PTG/src/About.tsx

@@ -0,0 +1,22 @@
+import Header from "./Header.tsx"
+
+
+export default function About(){
+    return(
+        <>
+            <Header />
+            <h1>About</h1>
+            <p>
+                This is the result of a group project in IT2810 at NTNU.
+                Yes, we are aware that each Pokédex takes in National Dex as well, so
+                it is possible getting, e.g. Charizard when picking HG/SS.
+                This results in end game Pokémon showing up in the Team Generator.
+                Please be aware of this when generating a team.
+            </p>
+            <p>
+                This website is made by students, and is made for training reasons,
+                also for lazy people not wanting to pick a team themselves.
+            </p>
+        </>
+    );
+}

PTG/src/App.tsx

@@ -1,13 +1,31 @@
+import { useEffect, useState } from "react";
 import Header from "./Header.tsx"
 import ChoosePokemon from "./ChoosePokemon.tsx";
+import PokemonGrid from "./PokemonGrid.tsx";
+import { loadStoredFilters, saveStoredFilters } from "./pokemonFilters.ts";
 
 export default function App(){
-
+	const [selectedGame, setSelectedGame] = useState(() => loadStoredFilters().selectedGame);
+	const [selectedGeneration, setSelectedGeneration] = useState(() => loadStoredFilters().selectedGeneration);
+	const [selectedType, setSelectedType] = useState(() => loadStoredFilters().selectedType);
+
+	useEffect(() => {
+		saveStoredFilters({ selectedGame, selectedGeneration, selectedType });
+	}, [selectedGame, selectedGeneration, selectedType]);
+
 	return(
 		<div>
 			<Header />
-			<ChoosePokemon />
+			<ChoosePokemon
+				selectedGame={selectedGame}
+				selectedGeneration={selectedGeneration}
+				selectedType={selectedType}
+				onGameChange={setSelectedGame}
+				onGenerationChange={setSelectedGeneration}
+				onTypeChange={setSelectedType}
+			/>
+			<PokemonGrid selectedGame={selectedGame} selectedGeneration={selectedGeneration} selectedType={selectedType} />
 		</div>
 
-	); 
-}
+	);
+}

PTG/src/ChoosePokemon.css

@@ -0,0 +1,5 @@
+.chooseType {
+	field-sizing: content;
+	width: fit-content;
+	max-width: 100%;
+}