From 39cad5771ef12fe3106a0143c137202a698e63a7 Mon Sep 17 00:00:00 2001
From: Guillaume <stage1@echoes.solutions>
Date: Fri, 26 Jun 2026 10:55:10 +0200
Subject: [PATCH] =?UTF-8?q?pages=20d=C3=A9tails?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mon-projet/src/data.js           | 23 +++++++++++++++++++++++
 mon-projet/src/pages/Accueil.jsx | 29 +----------------------------
 mon-projet/src/pages/Details.jsx | 24 ++++++++++++++++++++----
 3 files changed, 44 insertions(+), 32 deletions(-)
 create mode 100644 mon-projet/src/data.js

diff --git a/mon-projet/src/data.js b/mon-projet/src/data.js
new file mode 100644
index 0000000..e8b50df
--- /dev/null
+++ b/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",
+  },
+];
diff --git a/mon-projet/src/pages/Accueil.jsx b/mon-projet/src/pages/Accueil.jsx
index 5d92064..8fc4bb6 100644
--- a/mon-projet/src/pages/Accueil.jsx
+++ b/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");
diff --git a/mon-projet/src/pages/Details.jsx b/mon-projet/src/pages/Details.jsx
index 85258d1..d531526 100644
--- a/mon-projet/src/pages/Details.jsx
+++ b/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;