pages détails

mon-projet/src/data.js

@@ -0,0 +1,23 @@
+export const initialData = [
+  {
+    id: 1,
+    nom: "The RGB Trilogy",
+    niveaux: "Yatagarasu - Erebus - Sonic Wave",
+  },
+  { id: 2, nom: "The Greek Letter Trilogy", niveaux: "Omega - Sigma - Gamma" },
+  {
+    id: 3,
+    nom: "The Techno Trilogy",
+    niveaux: "Artificial Ascent - Digital Descent - Cybernetic Crescent",
+  },
+  {
+    id: 4,
+    nom: "The Riot's Trilogy",
+    niveaux: "Tartarus - Acheron - Aeternus",
+  },
+  {
+    id: 5,
+    nom: "The Apocalytic Trilogy",
+    niveaux: "Cataclysm - Bloodbath - Aftermath",
+  },
+];

mon-projet/src/pages/Accueil.jsx

@@ -2,34 +2,7 @@ import { useState } from "react";
 import Carte from "../components/carte";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
-import { useParams } from "react-router-dom";
-const initialData = [
-  {
-    id: 1,
-    nom: "The RGB Trilogy",
-    niveaux: "Yatagarasu - Erebus - Sonic Wave",
-  },
-  {
-    id: 2,
-    nom: "The Greek Letter Trilogy",
-    niveaux: "Omega - Sigma - Gamma",
-  },
-  {
-    id: 3,
-    nom: "The Techno Trilogy",
-    niveaux: "Artificial Ascent - Digital Descent - Cybernetic Crescent ",
-  },
-  {
-    id: 4,
-    nom: "The Riot's Trilogy",
-    niveaux: "Tartarus - Acheron - Aeternus",
-  },
-  {
-    id: 5,
-    nom: "The Apocalytic Trilogy",
-    niveaux: "Cataclysm - Bloodbath - aftermath",
-  },
-];
+import { initialData } from "../data";
 
 function Accueil() {
   console.log("test");

mon-projet/src/pages/Details.jsx

@@ -1,9 +1,25 @@
-import { useParams } from "react-router-dom";
+import { useParams, Link } from "react-router-dom";
+import { initialData } from "../data";
 
 function Details() {
-  const { id } = useParams(); // récupère le :id de l'URL
-  console.log(id);
+  const { id } = useParams();
 
-  return <h1>Détails de la trilogie {id}</h1>;
+  const trilogie = initialData.find((t) => t.id === Number(id));
+
+  if (!trilogie)
+    return (
+      <p>
+        Trilogie introuvable 🤷 <Link to="/">← retour</Link>
+      </p>
+    );
+
+  return (
+    <div className="detail">
+      <Link to="/">← Retour à la liste</Link>
+      <h1>{trilogie.nom}</h1>
+      <p>🎮 Niveaux : {trilogie.niveaux}</p>
+    </div>
+  );
 }
+
 export default Details;