34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
// assets/js/components/Modal.js
|
||
const Modal = ({ isOpen, onClose, title, children, size = "default" }) => {
|
||
if (!isOpen) return null;
|
||
|
||
const sizeClasses = {
|
||
default: "max-w-2xl",
|
||
large: "max-w-4xl",
|
||
small: "max-w-md",
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 p-4"
|
||
onClick={onClose}
|
||
>
|
||
<div
|
||
className={`bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl w-full max-h-[90vh] overflow-y-auto border border-slate-700 shadow-2xl ${sizeClasses[size]}`}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="flex justify-between items-center p-6 border-b border-slate-700 sticky top-0 bg-slate-800/95 backdrop-blur">
|
||
<h3 className="text-xl font-semibold text-white">{title}</h3>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-2xl text-slate-400 hover:text-white transition"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div className="p-6">{children}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|