DeleteMessageConfirmModal.tsx 1.2 KB

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