72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { X } from 'lucide-react';
|
|
|
|
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 {
|
|
const timer = setTimeout(() => setIsVisible(false), 300); // correspond à la durée CSS
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
if (!isVisible) return null;
|
|
|
|
const handleBackdropClick = (e: React.MouseEvent) => {
|
|
if (e.target === e.currentTarget) onClose();
|
|
};
|
|
|
|
// Définir largeur modal selon taille
|
|
const sizeClasses = {
|
|
sm: 'max-w-md',
|
|
md: 'max-w-xl',
|
|
lg: 'max-w-3xl',
|
|
xl: 'max-w-5xl',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm transition-opacity ${
|
|
isOpen ? 'opacity-100' : 'opacity-0'
|
|
}`}
|
|
onClick={handleBackdropClick}
|
|
>
|
|
<div
|
|
className={`w-full ${sizeClasses[size]} bg-white dark:bg-gray-900 rounded-2xl shadow-2xl flex flex-col max-h-[90vh] overflow-hidden transform transition-all ${
|
|
isOpen ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0'
|
|
}`}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</h2>
|
|
<button
|
|
className="flex items-center justify-center w-9 h-9 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white transition-all"
|
|
onClick={onClose}
|
|
aria-label="Fermer la modal"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-6 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Modal;
|