924efa9073
Add optional error prop to DeleteConfirmModal and wire it into AdminRuns so the backend's rejection message is displayed to the user. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
interface DeleteConfirmModalProps {
|
|
title: string
|
|
message: string
|
|
onConfirm: () => void
|
|
onCancel: () => void
|
|
isDeleting?: boolean
|
|
error?: string | null
|
|
}
|
|
|
|
export function DeleteConfirmModal({
|
|
title,
|
|
message,
|
|
onConfirm,
|
|
onCancel,
|
|
isDeleting,
|
|
error,
|
|
}: DeleteConfirmModalProps) {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div className="fixed inset-0 bg-black/50" onClick={onCancel} />
|
|
<div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4">
|
|
<div className="px-6 py-4">
|
|
<h2 className="text-lg font-semibold text-red-600 dark:text-red-400">
|
|
{title}
|
|
</h2>
|
|
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
|
|
{message}
|
|
</p>
|
|
{error && (
|
|
<p className="mt-2 text-sm text-red-600 dark:text-red-400">
|
|
{error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onConfirm}
|
|
disabled={isDeleting}
|
|
className="px-4 py-2 text-sm font-medium rounded-md bg-red-600 text-white hover:bg-red-700 disabled:opacity-50"
|
|
>
|
|
{isDeleting ? 'Deleting...' : 'Delete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|