DeleteMessageConfirmModal.tsx54 lines · main
1import {
2 Button,
3 Dialog,
4 DialogContent,
5 DialogFooter,
6 DialogHeader,
7 DialogSection,
8 DialogSectionSeparator,
9 DialogTitle,
10} from 'ui'
11
12type DeleteMessageConfirmModalProps = {
13 visible: boolean
14 onConfirm: () => void
15 onCancel: () => void
16}
17
18export const DeleteMessageConfirmModal = ({
19 visible,
20 onConfirm,
21 onCancel,
22}: DeleteMessageConfirmModalProps) => {
23 const onOpenChange = (open: boolean) => {
24 if (!open) onCancel()
25 }
26
27 return (
28 <Dialog open={visible} onOpenChange={onOpenChange}>
29 <DialogContent size="small">
30 <DialogHeader padding="small">
31 <DialogTitle>Delete Message</DialogTitle>
32 </DialogHeader>
33
34 <DialogSectionSeparator />
35
36 <DialogSection padding="small">
37 <p className="text-sm text-foreground-light">
38 Are you sure you want to delete this message and all subsequent messages? This action
39 cannot be undone.
40 </p>
41 </DialogSection>
42
43 <DialogFooter padding="small">
44 <Button type="default" onClick={onCancel}>
45 Cancel
46 </Button>
47 <Button type="danger" onClick={onConfirm}>
48 Delete
49 </Button>
50 </DialogFooter>
51 </DialogContent>
52 </Dialog>
53 )
54}