94 lines
3.3 KiB
React
94 lines
3.3 KiB
React
|
import { AlertTriangle, Loader2 } from 'lucide-react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Reusable Confirmation Modal for actions that need user confirmation
|
||
|
|
*
|
||
|
|
* @param {boolean} isOpen - Controls modal visibility
|
||
|
|
* @param {function} onClose - Close/Cancel handler
|
||
|
|
* @param {function} onConfirm - Confirm action handler
|
||
|
|
* @param {string} title - Modal title
|
||
|
|
* @param {string} description - Optional description text
|
||
|
|
* @param {string} message - Main message/question to display
|
||
|
|
* @param {string} confirmText - Confirm button text (default: 'Confirm')
|
||
|
|
* @param {string} cancelText - Cancel button text (default: 'Cancel')
|
||
|
|
* @param {string} confirmButtonClass - Custom classes for confirm button (default: red/danger style)
|
||
|
|
* @param {React.Component} icon - Icon component (default: AlertTriangle)
|
||
|
|
* @param {string} iconBgClass - Icon background class (default: bg-red-100)
|
||
|
|
* @param {string} iconColorClass - Icon color class (default: text-red-600)
|
||
|
|
* @param {boolean} isLoading - Shows loading state on confirm button
|
||
|
|
* @param {string} loadingText - Text to show when loading (default: 'Loading...')
|
||
|
|
*/
|
||
|
|
const ConfirmationModal = ({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
onConfirm,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
message,
|
||
|
|
confirmText = 'Confirm',
|
||
|
|
cancelText = 'Cancel',
|
||
|
|
confirmButtonClass = 'bg-red-600 hover:bg-red-700',
|
||
|
|
icon: Icon = AlertTriangle,
|
||
|
|
iconBgClass = 'bg-red-100',
|
||
|
|
iconColorClass = 'text-red-600',
|
||
|
|
isLoading = false,
|
||
|
|
loadingText = 'Loading...'
|
||
|
|
}) => {
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
|
||
|
|
onClick={onClose}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="bg-white rounded-lg shadow-xl max-w-md w-full p-6"
|
||
|
|
onClick={(e) => e.stopPropagation()}
|
||
|
|
>
|
||
|
|
{/* Header with Icon */}
|
||
|
|
<div className="flex items-center gap-3 mb-4">
|
||
|
|
<div className={`w-12 h-12 rounded-full ${iconBgClass} flex items-center justify-center flex-shrink-0`}>
|
||
|
|
<Icon className={iconColorClass} size={24} />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<h3 className="text-lg font-semibold text-gray-900">{title}</h3>
|
||
|
|
{description && <p className="text-sm text-gray-600">{description}</p>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Message */}
|
||
|
|
{message && (
|
||
|
|
<p className="text-gray-700 mb-6">{message}</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
<div className="flex gap-3">
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
disabled={isLoading}
|
||
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
|
>
|
||
|
|
{cancelText}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={onConfirm}
|
||
|
|
disabled={isLoading}
|
||
|
|
className={`flex-1 px-4 py-2 ${confirmButtonClass} text-white rounded-lg transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2`}
|
||
|
|
>
|
||
|
|
{isLoading ? (
|
||
|
|
<>
|
||
|
|
<Loader2 className="animate-spin" size={16} />
|
||
|
|
{loadingText}
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
confirmText
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ConfirmationModal;
|