53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
|
|
import React from 'react';
|
|
import { AlertTriangle, X } from 'lucide-react';
|
|
import { Language } from '../types';
|
|
import { translations } from '../utils/localization';
|
|
|
|
interface ConfirmModalProps {
|
|
isOpen: boolean;
|
|
title: string;
|
|
message: string;
|
|
language: Language;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, language, onConfirm, onCancel }) => {
|
|
if (!isOpen) return null;
|
|
const t = translations[language].common;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center bg-slate-900/40 backdrop-blur-sm animate-fade-in p-4">
|
|
<div className="bg-white w-full max-w-sm rounded-2xl shadow-2xl p-6 animate-scale-in relative">
|
|
<button onClick={onCancel} className="absolute top-4 right-4 text-slate-400 hover:text-slate-600">
|
|
<X size={20} />
|
|
</button>
|
|
<div className="flex flex-col items-center text-center">
|
|
<div className="w-12 h-12 bg-red-50 text-red-500 rounded-full flex items-center justify-center mb-4">
|
|
<AlertTriangle size={24} />
|
|
</div>
|
|
<h3 className="text-lg font-bold text-slate-800 mb-2">{title}</h3>
|
|
<p className="text-sm text-slate-500 mb-6">{message}</p>
|
|
<div className="flex gap-3 w-full">
|
|
<button
|
|
onClick={onCancel}
|
|
className="flex-1 py-2.5 px-4 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold transition-colors"
|
|
>
|
|
{t.cancel}
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
className="flex-1 py-2.5 px-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold transition-colors shadow-lg shadow-red-200"
|
|
>
|
|
{t.confirm}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConfirmModal;
|