Ladebeze66/devsite
1
0
Fork 0
mirror of https://github.com/Ladebeze66/devsite.git synced 2025-12-13 12:46:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

glossaire3

Browse Source
This commit is contained in:
Ladebeze66 2025-01-30 16:26:23 +00:00
parent 07cd4849d5
commit 79abdf987e
1 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/components/ModalGlossaire.tsx
View File

@ -1,3 +1,5 @@
import { useEffect } from "react";
import { createPortal } from "react-dom"; // ✅ Insère la modale dans <body>
import CarouselCompetences from "./CarouselCompetences"; import CarouselCompetences from "./CarouselCompetences";
interface ModalGlossaireProps { interface ModalGlossaireProps {
@ -10,31 +12,47 @@ interface ModalGlossaireProps {
} }
export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) { export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
return ( // 🔥 Désactiver le scroll du `body` quand la modale est ouverte
<div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"> useEffect(() => {
<div className="bg-white p-6 rounded-lg shadow-lg max-w-2xl w-full relative"> 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(
<div className="fixed inset-0 w-screen h-screen bg-black bg-opacity-75 flex items-center justify-center z-[1000]">
<div className="bg-white p-6 rounded-lg shadow-lg w-[90vw] max-w-4xl relative">
{/* Bouton de fermeture */} {/* Bouton de fermeture */}
<button className="absolute top-3 right-3 text-gray-700 text-2xl" onClick={onClose}> <button className="absolute top-3 right-3 text-gray-700 text-2xl" onClick={onClose}>
✖ ✖
</button> </button>
{/* Titre */} {/* Titre */}
<h2 className="text-2xl font-bold mb-4">{mot.mot_clef}</h2> <h2 className="text-3xl font-bold mb-4">{mot.mot_clef}</h2>
{/* Description */} {/* Description */}
<p className="text-gray-700 mb-4">{mot.description}</p> <p className="text-gray-700 mb-6">{mot.description}</p>
{/* Carrousel d'images si disponible */} {/* 🚀 Carrousel d'images si disponible */}
{mot.images && mot.images.length > 0 && ( {images.length > 0 ? (
<CarouselCompetences <CarouselCompetences images={images} className="w-full h-80" />
images={mot.images.map((img: any) => ({ ) : (
url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`, <p className="text-gray-500 text-center">Aucune image disponible</p>
alt: img.name || "Illustration",
}))}
className="w-full h-64"
/>
)} )}
</div> </div>
</div> </div>,
document.body // ✅ Fixe la modale au `body` pour qu'elle couvre toute la page
); );
} }