File size: 2,142 Bytes
42da440 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import React from 'react';
import { FiX } from 'react-icons/fi';
function Modal({ isOpen, onClose, title, children, width = 'max-w-lg' }) {
// Handle Escape key press - Hooks must be called unconditionally
React.useEffect(() => {
const handleEscape = (event) => {
if (event.key === 'Escape') {
onClose();
}
};
// Only add listener if modal is open
if (isOpen) {
document.addEventListener('keydown', handleEscape);
}
// Cleanup function removes listener
return () => {
document.removeEventListener('keydown', handleEscape);
};
}, [isOpen, onClose]); // Depend on isOpen and onClose
// Early return if not open, *after* hooks
if (!isOpen) return null;
return (
<div
className="fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4 transition-opacity duration-300 ease-in-out opacity-100" // Start visible for animation
onClick={onClose} // Close on backdrop click
aria-modal="true"
role="dialog"
>
<div
className={`bg-gray-800 rounded-lg shadow-xl p-6 w-full ${width} relative transform transition-all duration-300 ease-in-out scale-95 opacity-0 animate-fade-scale-in`}
onClick={e => e.stopPropagation()} // Prevent closing when clicking inside modal
>
<button
onClick={onClose}
className="absolute top-3 right-3 text-gray-500 hover:text-gray-300 text-2xl p-1 rounded-full hover:bg-gray-700"
aria-label="Close modal"
>
<FiX />
</button>
<h2 className="text-xl font-semibold mb-4 text-gray-100">{title}</h2>
<div className="text-gray-300">
{children}
</div>
</div>
</div>
);
}
// Add simple fade-in animation (requires Tailwind config update)
// In tailwind.config.js -> theme -> extend -> keyframes & animation:
/*
keyframes: {
'fade-scale-in': {
'0%': { opacity: '0', transform: 'scale(0.95)' },
'100%': { opacity: '1', transform: 'scale(1)' },
}
},
animation: {
'fade-scale-in': 'fade-scale-in 0.2s ease-out forwards',
}
*/
export default Modal; |