diff --git a/app/components/ModalGlossaire.tsx b/app/components/ModalGlossaire.tsx index ad2fe27..8e50f57 100644 --- a/app/components/ModalGlossaire.tsx +++ b/app/components/ModalGlossaire.tsx @@ -1,3 +1,5 @@ +import { useEffect } from "react"; +import { createPortal } from "react-dom"; // ✅ Insère la modale dans import CarouselCompetences from "./CarouselCompetences"; interface ModalGlossaireProps { @@ -10,31 +12,47 @@ interface ModalGlossaireProps { } export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) { - return ( -
-
+ // 🔥 Désactiver le scroll du `body` quand la modale est ouverte + useEffect(() => { + document.body.classList.add("overflow-hidden"); + return () => { + document.body.classList.remove("overflow-hidden"); + }; + }, []); + + // ✅ Debug : Vérifier les images reçues + console.log("🖼️ Images reçues dans la modale :", mot.images); + + // ✅ Vérifier si `mot.images` est bien un tableau et contient des images + const images = mot.images?.map((img: any) => { + return { + url: `http://localhost:1337${img.formats?.large?.url || img.url}`, + alt: img.name || "Illustration", + }; + }) || []; + + return createPortal( +
+
{/* Bouton de fermeture */} {/* Titre */} -

{mot.mot_clef}

+

{mot.mot_clef}

{/* Description */} -

{mot.description}

+

{mot.description}

- {/* Carrousel d'images si disponible */} - {mot.images && mot.images.length > 0 && ( - ({ - url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`, - alt: img.name || "Illustration", - }))} - className="w-full h-64" - /> + {/* 🚀 Carrousel d'images si disponible */} + {images.length > 0 ? ( + + ) : ( +

Aucune image disponible

)}
-
+
, + document.body // ✅ Fixe la modale au `body` pour qu'elle couvre toute la page ); }