Function ConfirmationModal

apps/web/ui/ConfirmationModal/index.tsx:17–68

({
  open,
  close,
  onConfirm,
  title,
  description,
  confirm,
  cancel,
}: Props)

}

export default function ConfirmationModal({
  open,
  close,
  onConfirm,
  title,
  description,
  confirm,
  cancel,
}: Props) {
  useKeyboard(
    {
      onKeyUp(event) {
        if (open) {
          if (event.key === 'Escape') {
            event.preventDefault();
            event.stopPropagation();
            close();
          }

          if (event.key === 'Enter') {
            event.preventDefault();
            event.stopPropagation();
            onConfirm();
          }
        }
      },
    },
    [open]
  );
  return (
    <Modal open={open} close={close}>
      <h3 className={styles.header}>{title || 'Confirmation'}</h3>
      <p className={styles.description}>{description || 'Are you sure?'}</p>
      <div className={styles.buttons}>
        <Button
          color="blue"
          onClick={(event) => {
            event.preventDefault();
            event.stopPropagation();
            onConfirm();
          }}
          type="button"
        >
          {confirm || 'Confirm'}
        </Button>
        <Button color="gray" onClick={close} type="button">
          {cancel || 'Cancel'}
        </Button>
      </div>
    </Modal>
  );
}