87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { X, AlertTriangle } from 'lucide-react';
|
|
|
|
interface ConfirmModalProps {
|
|
title: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
variant?: 'danger' | 'warning' | 'info';
|
|
}
|
|
|
|
export default function ConfirmModal({
|
|
title,
|
|
message,
|
|
confirmText,
|
|
cancelText,
|
|
onConfirm,
|
|
onCancel,
|
|
variant = 'danger',
|
|
}: ConfirmModalProps) {
|
|
const { t } = useTranslation();
|
|
const defaultConfirmText = confirmText || t('common.confirm');
|
|
const defaultCancelText = cancelText || t('common.cancel');
|
|
const getVariantStyles = () => {
|
|
switch (variant) {
|
|
case 'danger':
|
|
return {
|
|
icon: 'btn-danger',
|
|
confirmButton: 'btn-danger hover:shadow-lg',
|
|
};
|
|
case 'warning':
|
|
return {
|
|
icon: 'bg-yellow-100 text-yellow-600',
|
|
confirmButton: 'bg-gradient-to-r from-yellow-500 to-yellow-600 hover:shadow-lg',
|
|
};
|
|
case 'info':
|
|
return {
|
|
icon: 'btn-primary',
|
|
confirmButton: 'btn-primary hover:shadow-lg',
|
|
};
|
|
}
|
|
};
|
|
|
|
const styles = getVariantStyles();
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-4">
|
|
<div className="glass-effect rounded-3xl shadow-2xl max-w-md w-full overflow-hidden animate-scale-in">
|
|
<div className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className={`p-3 rounded-2xl ${styles.icon} text-white`}>
|
|
<AlertTriangle className="w-6 h-6" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-xl font-bold text-gray-900 mb-2">{title}</h3>
|
|
<p className="text-gray-600">{message}</p>
|
|
</div>
|
|
<button
|
|
onClick={onCancel}
|
|
className="p-2 hover:bg-gray-100 rounded-xl transition-all"
|
|
>
|
|
<X className="w-5 h-5 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-6 pb-6 flex gap-3">
|
|
<button
|
|
onClick={onCancel}
|
|
className="flex-1 px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all font-semibold"
|
|
>
|
|
{defaultCancelText}
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
className={`flex-1 px-6 py-3 text-white rounded-2xl transition-all font-semibold ${styles.confirmButton}`}
|
|
>
|
|
{defaultConfirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|