50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { FaTimes } from 'react-icons/fa'; // Assuming you have react-icons installed
|
|
|
|
// Added size prop to control modal width
|
|
const Modal = ({ isOpen, onClose, title, children, size = 'lg' }) => {
|
|
if (!isOpen) return null;
|
|
|
|
// Determine max-width class based on size prop
|
|
let maxWidthClass = 'max-w-lg'; // Default size
|
|
if (size === 'md') {
|
|
maxWidthClass = 'max-w-md';
|
|
} else if (size === 'xl') {
|
|
maxWidthClass = 'max-w-xl';
|
|
} else if (size === '2xl') {
|
|
maxWidthClass = 'max-w-2xl';
|
|
} else if (size === 'full') {
|
|
maxWidthClass = 'max-w-full'; // Use with caution, might need padding adjustments
|
|
}
|
|
|
|
|
|
// Use createPortal to render the modal outside the main app div
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 p-4">
|
|
{/* Use maxWidthClass here */}
|
|
<div className={`bg-campfire-charcoal rounded-lg shadow-xl w-full ${maxWidthClass} max-h-[90vh] overflow-y-auto relative`}>
|
|
{/* Modal Header */}
|
|
<div className="flex justify-between items-center p-4 border-b border-campfire-ash/20">
|
|
<h3 className="text-xl font-semibold text-campfire-light">{title}</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-campfire-ash hover:text-campfire-light transition-colors"
|
|
aria-label="Close modal"
|
|
>
|
|
<FaTimes size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Modal Body */}
|
|
<div className="p-4">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body // Render into the body
|
|
);
|
|
};
|
|
|
|
export default Modal;
|