mirror of
https://github.com/Ladebeze66/devsite.git
synced 2025-12-13 04:36:49 +01:00
72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import { useEffect } from "react";
|
|
import { createPortal } from "react-dom"; // Insère la modale dans <body>
|
|
import { getApiUrl } from "../utils/getApiUrl"; // ✅ Import de l'URL dynamique
|
|
import CarouselCompetences from "./CarouselCompetences"; // Importation du composant CarouselCompetences
|
|
|
|
// ✅ Définition des propriétés du composant ModalGlossaire
|
|
interface ImageData {
|
|
url: string;
|
|
formats?: {
|
|
large?: { url: string };
|
|
};
|
|
name?: string;
|
|
}
|
|
|
|
interface GlossaireMot {
|
|
mot_clef: string; // Mot-clé du glossaire
|
|
description: string; // Description du mot-clé
|
|
images?: ImageData[]; // Images associées au mot-clé
|
|
}
|
|
|
|
interface ModalGlossaireProps {
|
|
mot: GlossaireMot;
|
|
onClose: () => void;
|
|
}
|
|
|
|
// ✅ Composant principal ModalGlossaire
|
|
export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
|
|
const apiUrl = getApiUrl(); // 🔥 Détection automatique de l'URL API
|
|
|
|
// 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érification et mise à jour des URLs d'image avec `getApiUrl()`
|
|
const images = mot.images?.map((img) => ({
|
|
url: `${apiUrl}${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">Aucune image disponible.</p>
|
|
)}
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|