84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { AlertTriangle, Trash2, X } from 'lucide-react';
|
|
|
|
interface ConfirmDeleteModalProps {
|
|
isOpen: boolean;
|
|
title?: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
onConfirm: () => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function ConfirmDeleteModal({
|
|
isOpen,
|
|
title = "Confirm Deletion",
|
|
message,
|
|
confirmText = "Delete",
|
|
cancelText = "Cancel",
|
|
onConfirm,
|
|
onClose,
|
|
}: ConfirmDeleteModalProps) {
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape' && isOpen) {
|
|
onClose();
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [isOpen, onClose]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-150">
|
|
<div
|
|
className="relative w-full max-w-md bg-card border border-border rounded-xl shadow-2xl overflow-hidden p-6 space-y-5 animate-in zoom-in-95 duration-150"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 text-muted-foreground hover:text-foreground p-1.5 rounded-lg hover:bg-muted transition-colors cursor-pointer"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-10 h-10 rounded-full bg-destructive/10 text-destructive flex items-center justify-center shrink-0">
|
|
<AlertTriangle size={20} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h3 className="text-base font-semibold text-foreground tracking-tight">{title}</h3>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">{message}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-xs font-semibold text-muted-foreground hover:text-foreground hover:bg-muted border border-border rounded-lg transition-colors cursor-pointer"
|
|
>
|
|
{cancelText}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
onConfirm();
|
|
onClose();
|
|
}}
|
|
className="px-4 py-2 text-xs font-semibold text-white bg-destructive hover:bg-destructive/90 rounded-lg shadow-sm transition-colors cursor-pointer flex items-center gap-1.5"
|
|
>
|
|
<Trash2 size={13} />
|
|
{confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|