File size: 1,537 Bytes
0bfe2e3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
'use client';
import { Button, ButtonProps } from '@/components/ui/button';
import { Modal } from '@/components/ui/modal';
import { useDisclosure, UseDisclosureReturn } from '@/hooks/disclosure';
import React from 'react';

type ConfirmationDialogHookProps = {
  title: string;
  description?: string;
  actionText?: string;
  actionIntent?: ButtonProps['intent'];
  onConfirm: () => void;
};

export function useConfirmationDialog(props: ConfirmationDialogHookProps) {
  const api = useDisclosure(false);
  return {
    ...api,
    ...props,
  };
}

export const ConfirmationDialog: React.FC<
  ConfirmationDialogHookProps & UseDisclosureReturn
> = (props) => {
  const {
    isOpen,
    close,
    onConfirm,
    title,
    description = 'Are you sure you want to continue?',
    actionText = 'Confirm',
    actionIntent = 'alert-subtle',
  } = props;

  return (
    <>
      <Modal
        title={title}
        titleClass="text-center"
        open={isOpen}
        onOpenChange={close}
      >
        <div className="space-y-4">
          <p className="text-center">{description}</p>
          <div className="flex gap-2 justify-center items-center">
            <Button
              intent={actionIntent}
              onClick={() => {
                onConfirm();
                close();
              }}
            >
              {actionText}
            </Button>
            <Button intent="white" onClick={close}>
              Cancel
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
};