63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
"use client";
|
||
import React from "react";
|
||
import { motion, AnimatePresence } from "motion/react";
|
||
import { Trash2 } from "lucide-react";
|
||
|
||
interface DeleteConfirmModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
onConfirm: () => void;
|
||
title: string;
|
||
message: string;
|
||
}
|
||
|
||
export default function DeleteConfirmModal({ isOpen, onClose, onConfirm, title, message }: DeleteConfirmModalProps) {
|
||
return (
|
||
<AnimatePresence>
|
||
{isOpen && (
|
||
<div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
onClick={onClose}
|
||
className="absolute inset-0 bg-medical-gray-900/60 backdrop-blur-md"
|
||
/>
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
||
className="bg-white w-full max-w-sm rounded-[2.5rem] relative z-10 shadow-2xl p-8 text-center font-vazir"
|
||
dir="rtl"
|
||
>
|
||
<div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center text-red-500 mx-auto mb-6">
|
||
<Trash2 className="w-8 h-8" />
|
||
</div>
|
||
|
||
<h3 className="text-xl font-black text-medical-gray-900 mb-2 italic">{title}</h3>
|
||
<p className="text-sm font-bold text-medical-gray-500 leading-relaxed mb-8">{message}</p>
|
||
|
||
<div className="flex gap-4">
|
||
<button
|
||
onClick={onClose}
|
||
className="flex-1 py-4 bg-medical-gray-50 text-medical-gray-400 rounded-2xl font-black text-sm hover:bg-medical-gray-100 transition-all"
|
||
>
|
||
خیر، بماند
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
onConfirm();
|
||
onClose();
|
||
}}
|
||
className="flex-1 py-4 bg-red-500 text-white rounded-2xl font-black text-sm hover:bg-red-600 transition-all shadow-lg shadow-red-500/20"
|
||
>
|
||
بله، حذف شود
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
)}
|
||
</AnimatePresence>
|
||
);
|
||
}
|