60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { X } from 'lucide-react';
|
|
import './Modal.css';
|
|
|
|
interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
}
|
|
|
|
const Modal: React.FC<ModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
title,
|
|
children,
|
|
size = 'md'
|
|
}) => {
|
|
const [isVisible, setIsVisible] = useState(isOpen);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setIsVisible(true);
|
|
} else {
|
|
// attendre que l'animation de fermeture se joue
|
|
const timer = setTimeout(() => setIsVisible(false), 300); // durée en ms = durée CSS
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
if (!isVisible) return null;
|
|
|
|
const handleBackdropClick = (e: React.MouseEvent) => {
|
|
if (e.target === e.currentTarget) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`modal-overlay ${isOpen ? 'fade-in' : 'fade-out'}`} onClick={handleBackdropClick}>
|
|
<div className={`modal-container modal-${size} ${isOpen ? 'slide-in' : 'slide-out'}`}>
|
|
<div className="modal-header">
|
|
<h2 className="modal-title">{title}</h2>
|
|
<button
|
|
className="modal-close-button"
|
|
onClick={onClose}
|
|
aria-label="Fermer la modal"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
<div className="modal-content">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Modal;
|