62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
interface DeleteConfirmModalProps {
|
|
open: boolean;
|
|
ingredientName: string;
|
|
onClose: () => void;
|
|
onConfirm: () => Promise<void>;
|
|
}
|
|
|
|
export default function DeleteConfirmModal({ open, ingredientName, onClose, onConfirm }: DeleteConfirmModalProps) {
|
|
const [deleting, setDeleting] = useState(false);
|
|
|
|
if (!open) return null;
|
|
|
|
const handleDelete = async () => {
|
|
setDeleting(true);
|
|
await onConfirm();
|
|
setDeleting(false);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div className="fixed inset-0 bg-black/40" onClick={onClose} />
|
|
|
|
<div className="relative bg-white rounded-xl shadow-2xl w-full max-w-md mx-4">
|
|
<div className="px-6 py-5">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
|
|
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-gray-900">Delete Ingredient</h2>
|
|
</div>
|
|
<p className="text-sm text-gray-600">
|
|
Are you sure you want to delete <span className="font-semibold text-gray-900">{ingredientName}</span>? This action cannot be undone.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200">
|
|
<button
|
|
onClick={onClose}
|
|
disabled={deleting}
|
|
className="px-4 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-700 text-sm font-medium hover:bg-gray-50 transition-colors disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={deleting}
|
|
className="px-4 py-2.5 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors disabled:opacity-50"
|
|
>
|
|
{deleting ? 'Deleting...' : 'Delete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|