| 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; |