56 lines
1.1 KiB
JavaScript
56 lines
1.1 KiB
JavaScript
|
|
import { useCallback } from "react";
|
|
|
|
const Modal = ({
|
|
isOpen,
|
|
onClose,
|
|
title,
|
|
body,
|
|
disabled,
|
|
size="md",
|
|
position="top",
|
|
}) => {
|
|
const handleClose = useCallback(() => {
|
|
if (disabled) return;
|
|
onClose();
|
|
}, [disabled, onClose]);
|
|
|
|
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className="modal fade show"
|
|
style={{ display: "block", backgroundColor: "rgba(0,0,0,0.6)" }}
|
|
tabIndex="-1"
|
|
role="dialog"
|
|
>
|
|
<div className={`modal-dialog modal-${size} modal-dialog-${position}`} role="document">
|
|
<div className="modal-content text-white shadow-lg">
|
|
{/* Header */}
|
|
<div className="modal-header pb-2 border-0">
|
|
<h5 className="modal-title">{title}</h5>
|
|
<button
|
|
type="button"
|
|
className="btn-close btn-close-white"
|
|
onClick={handleClose}
|
|
aria-label="Close"
|
|
>
|
|
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="modal-body pt-0">{body}</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Modal;
|