106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { AlertCircle, CheckCircle, Trash2, AlertTriangle } from 'lucide-react';
|
|
import Modal from './Modal';
|
|
|
|
interface ConfirmModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
title: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
variant?: 'danger' | 'warning' | 'info' | 'success';
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export default function ConfirmModal({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmText = 'Confirm',
|
|
cancelText = 'Cancel',
|
|
variant = 'danger',
|
|
isLoading = false,
|
|
}: ConfirmModalProps) {
|
|
const handleConfirm = () => {
|
|
onConfirm();
|
|
if (!isLoading) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
const variantConfig = {
|
|
danger: {
|
|
icon: Trash2,
|
|
iconColor: 'text-red-500',
|
|
iconBg: 'bg-red-500/10',
|
|
buttonColor: 'bg-red-600 hover:bg-red-700',
|
|
},
|
|
warning: {
|
|
icon: AlertTriangle,
|
|
iconColor: 'text-yellow-500',
|
|
iconBg: 'bg-yellow-500/10',
|
|
buttonColor: 'bg-yellow-600 hover:bg-yellow-700',
|
|
},
|
|
info: {
|
|
icon: AlertCircle,
|
|
iconColor: 'text-blue-500',
|
|
iconBg: 'bg-blue-500/10',
|
|
buttonColor: 'bg-blue-600 hover:bg-blue-700',
|
|
},
|
|
success: {
|
|
icon: CheckCircle,
|
|
iconColor: 'text-green-500',
|
|
iconBg: 'bg-green-500/10',
|
|
buttonColor: 'bg-green-600 hover:bg-green-700',
|
|
},
|
|
};
|
|
|
|
const config = variantConfig[variant];
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} size="sm" showCloseButton={false}>
|
|
<div className="p-6">
|
|
{/* Icon */}
|
|
<div className="flex items-center justify-center mb-4">
|
|
<div className={`${config.iconBg} p-3 rounded-full`}>
|
|
<Icon className={config.iconColor} size={32} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h2 className="text-xl font-bold text-white text-center mb-2">
|
|
{title}
|
|
</h2>
|
|
|
|
{/* Message */}
|
|
<p className="text-gray-400 text-center mb-6">
|
|
{message}
|
|
</p>
|
|
|
|
{/* Buttons */}
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
|
|
>
|
|
{cancelText}
|
|
</button>
|
|
<button
|
|
onClick={handleConfirm}
|
|
disabled={isLoading}
|
|
className={`flex-1 px-4 py-2 ${config.buttonColor} disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg transition-colors`}
|
|
>
|
|
{isLoading ? 'Loading...' : confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|