722e030ba6
Adds a reusable ConfirmDialog component and integrates tree deletion into the TreeLibraryPage with permission-gated delete buttons and a destructive confirmation dialog. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import { Modal } from './Modal'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface ConfirmDialogProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
onConfirm: () => void
|
|
title: string
|
|
message: string
|
|
confirmLabel?: string
|
|
confirmVariant?: 'destructive' | 'default'
|
|
isLoading?: boolean
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmLabel = 'Delete',
|
|
confirmVariant = 'destructive',
|
|
isLoading = false,
|
|
}: ConfirmDialogProps) {
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={title}
|
|
size="sm"
|
|
footer={
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className={cn(
|
|
'rounded-md border border-border px-4 py-2 text-sm font-medium',
|
|
'text-card-foreground hover:bg-accent',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed'
|
|
)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={isLoading}
|
|
className={cn(
|
|
'rounded-md px-4 py-2 text-sm font-medium text-white',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed',
|
|
confirmVariant === 'destructive'
|
|
? 'bg-destructive hover:bg-destructive/90'
|
|
: 'bg-primary hover:bg-primary/90'
|
|
)}
|
|
>
|
|
{isLoading ? 'Processing...' : confirmLabel}
|
|
</button>
|
|
</div>
|
|
}
|
|
>
|
|
<p className="text-sm text-muted-foreground">{message}</p>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default ConfirmDialog
|