71 lines
1.6 KiB
JavaScript
71 lines
1.6 KiB
JavaScript
import XIcon from "@/assets/XIcons";
|
|
import { useCallback } from "react";
|
|
import Button from "./Button";
|
|
|
|
const Modal = ({
|
|
isOpen,
|
|
onClose,
|
|
onSubmit,
|
|
title,
|
|
body,
|
|
footer,
|
|
actionLabel,
|
|
disabled,
|
|
}) => {
|
|
const handleClose = useCallback(() => {
|
|
if (disabled) return;
|
|
onClose();
|
|
}, [disabled, onClose]);
|
|
|
|
const handleSubmit = useCallback(() => {
|
|
if (disabled) return;
|
|
onSubmit();
|
|
}, [disabled, onSubmit]);
|
|
|
|
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-lg modal-dialog-centered" role="document">
|
|
<div className="modal-content bg-dark text-white shadow-lg">
|
|
{/* Header */}
|
|
<div className="modal-header border-0">
|
|
<h5 className="modal-title">{title}</h5>
|
|
<button
|
|
type="button"
|
|
className="btn-close btn-close-white"
|
|
onClick={handleClose}
|
|
aria-label="Close"
|
|
>
|
|
<XIcon color="white" size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="modal-body">{body}</div>
|
|
|
|
{/* Footer */}
|
|
<div className="modal-footer border-0 d-flex flex-column gap-2">
|
|
<Button
|
|
disabled={disabled}
|
|
secondary
|
|
fullWidth
|
|
large
|
|
label={actionLabel}
|
|
onClick={handleSubmit}
|
|
/>
|
|
{footer}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Modal;
|