updated confirm modal, added success option

This commit is contained in:
pramod.mahajan 2025-10-24 11:36:00 +05:30
parent 0d0b7f2cbc
commit 7c5dca1665

View File

@ -13,19 +13,18 @@ const ConfirmModal = ({
if (!isOpen) return null; if (!isOpen) return null;
const TypeofIcon = () => { const TypeofIcon = () => {
if (type === "delete") { switch (type) {
return ( case "delete":
<i return <i className="bx bx-x-circle text-danger" style={{ fontSize: "60px" }}></i>;
className="bx bx-x-circle text-danger" case "success":
style={{ fontSize: "60px" }} return <i className="bx bx-check-circle text-success" style={{ fontSize: "60px" }}></i>;
></i> case "warning":
); return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
} default:
return null; return null;
}
}; };
const modalSize = type === "delete" ? "sm" : "md";
return ( return (
<div <div
className="modal fade show" className="modal fade show"
@ -33,7 +32,7 @@ const ConfirmModal = ({
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
> >
<div className={`modal-dialog modal-${modalSize} modal-dialog-top`}> <div className="modal-dialog modal-sm modal-dialog-top">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body py-1 px-2"> <div className="modal-body py-1 px-2">
<div className="d-flex justify-content-between mb-4 pt-2"> <div className="d-flex justify-content-between mb-4 pt-2">
@ -47,8 +46,10 @@ const ConfirmModal = ({
</div> </div>
<div className="row"> <div className="row">
<div className="col-4 col-sm-2">{TypeofIcon()}</div> <div className="col-4 col-sm-3 d-flex justify-content-center align-items-start">
<div className="col-8 col-sm-10 py-sm-2 py-1 text-sm-start"> {TypeofIcon()}
</div>
<div className="col-8 col-sm-9 py-sm-2 py-1 text-sm-start">
<span className="fs-6">{message}</span> <span className="fs-6">{message}</span>
<div className="d-flex justify-content-end mt-4"> <div className="d-flex justify-content-end mt-4">
<button <button
@ -59,7 +60,7 @@ const ConfirmModal = ({
{loading ? "Please Wait..." : "Yes"} {loading ? "Please Wait..." : "Yes"}
</button> </button>
<button <button
className="btn btn-secondary ms-4 btn-sm" className="btn btn-secondary ms-3 btn-sm"
onClick={onClose} onClick={onClose}
disabled={loading} disabled={loading}
> >
@ -68,6 +69,7 @@ const ConfirmModal = ({
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>