mirror of
https://github.com/Ladebeze66/devsite.git
synced 2025-12-13 12:46:49 +01:00
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { useEffect } from "react";
|
|
import { createPortal } from "react-dom"; // ✅ Insère la modale dans <body>
|
|
import CarouselCompetences from "./CarouselCompetences";
|
|
|
|
interface ModalGlossaireProps {
|
|
mot: {
|
|
mot_clef: string;
|
|
description: string;
|
|
images?: any[];
|
|
};
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
|
|
// 🔥 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(
|
|
<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 */}
|
|
<button className="absolute top-3 right-3 text-gray-700 text-2xl" onClick={onClose}>
|
|
✖
|
|
</button>
|
|
|
|
{/* Titre */}
|
|
<h2 className="text-3xl font-bold mb-4">{mot.mot_clef}</h2>
|
|
|
|
{/* Description */}
|
|
<p className="text-gray-700 mb-6">{mot.description}</p>
|
|
|
|
{/* 🚀 Carrousel d'images si disponible */}
|
|
{images.length > 0 ? (
|
|
<CarouselCompetences images={images} className="w-full h-80" />
|
|
) : (
|
|
<p className="text-gray-500 text-center">Aucune image disponible</p>
|
|
)}
|
|
</div>
|
|
</div>,
|
|
document.body // ✅ Fixe la modale au `body` pour qu'elle couvre toute la page
|
|
);
|
|
}
|