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";
interface ModalGlossaireProps {
@ -10,31 +12,47 @@ interface ModalGlossaireProps {
}
export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
return (
<div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div className="bg-white p-6 rounded-lg shadow-lg max-w-2xl w-full relative">
// 🔥 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-2xl font-bold mb-4">{mot.mot_clef}</h2>
<h2 className="text-3xl font-bold mb-4">{mot.mot_clef}</h2>
{/* 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 */}
{mot.images && mot.images.length > 0 && (
<CarouselCompetences
images={mot.images.map((img: any) => ({
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 ? (
<CarouselCompetences images={images} className="w-full h-80" />
) : (
<p className="text-gray-500 text-center">Aucune image disponible</p>
)}
</div>
</div>
</div>,
document.body // ✅ Fixe la modale au `body` pour qu'elle couvre toute la page
);
}