73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
|
|
interface SuccessModalProps {
|
|
show: boolean;
|
|
onClose: () => void;
|
|
title?: string;
|
|
message: string;
|
|
}
|
|
|
|
const SuccessModal: React.FC<SuccessModalProps> = ({
|
|
show,
|
|
onClose,
|
|
title = "Success!",
|
|
message
|
|
}) => {
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
if (show) {
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
}
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [show, onClose]);
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div
|
|
className="modal d-block"
|
|
tabIndex={-1}
|
|
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) onClose();
|
|
}}
|
|
>
|
|
<div className="modal-dialog modal-dialog-centered">
|
|
<div className="modal-content">
|
|
<div className="modal-header border-0 pb-0">
|
|
<div className="w-100 text-center">
|
|
<div
|
|
className="mx-auto mb-3 d-flex align-items-center justify-content-center bg-success rounded-circle"
|
|
style={{ width: '60px', height: '60px' }}
|
|
>
|
|
<i className="bi bi-check-lg text-white" style={{ fontSize: '2rem' }}></i>
|
|
</div>
|
|
<h5 className="modal-title">{title}</h5>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
onClick={onClose}
|
|
></button>
|
|
</div>
|
|
<div className="modal-body text-center pt-0">
|
|
<p className="mb-4">{message}</p>
|
|
</div>
|
|
<div className="modal-footer border-0 pt-0 justify-content-center">
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary px-4"
|
|
onClick={onClose}
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SuccessModal; |