dtoro
7efac4354e
Adopts shadcn/ui components (Dialog, Button, Input, Select, Popover, Command, Checkbox, Switch, Toggle, Calendar, etc.) across the app, replacing hand-rolled modals, dropdowns, and form controls. Adds a reusable cmdk-backed MultiSelect for the Type, Tags, and Flag filters so all multi-value filter popovers share one component and layout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface ConfirmDialogProps {
|
|
isOpen: boolean
|
|
title: string
|
|
message: React.ReactNode
|
|
confirmLabel?: string
|
|
cancelLabel?: string
|
|
/** When true, the confirm button uses the destructive accent. */
|
|
destructive?: boolean
|
|
onConfirm: () => void
|
|
onClose: () => void
|
|
}
|
|
|
|
/**
|
|
* Modal confirmation dialog. Built on the shadcn Dialog primitive:
|
|
* Radix handles focus trap, portal, overlay-click dismissal, Esc, and
|
|
* animations. We only supply title, body, and the two action buttons.
|
|
*/
|
|
export function ConfirmDialog({
|
|
isOpen,
|
|
title,
|
|
message,
|
|
confirmLabel = 'Confirm',
|
|
cancelLabel = 'Cancel',
|
|
destructive = false,
|
|
onConfirm,
|
|
onClose,
|
|
}: ConfirmDialogProps) {
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={(o) => !o && onClose()}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
<DialogDescription asChild>
|
|
<div>{message}</div>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose}>
|
|
{cancelLabel}
|
|
</Button>
|
|
<Button
|
|
variant={destructive ? 'destructive' : 'default'}
|
|
onClick={onConfirm}
|
|
>
|
|
{confirmLabel}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|