gear-orders/web/vite/src/ConfirmDialogButton.tsx

import React from "react";
import { useDisclosure } from "@mantine/hooks";

import { Button, Modal, Text, Flex, ButtonVariant } from "@mantine/core";

export const ConfirmDialogButton: React.FC<{
  text: string;
  buttonText: string;
  buttonColor: string;
  onConfirm: () => void;
  children: React.ReactNode;
  variant?: ButtonVariant;
}> = ({
  text,
  buttonText,
  buttonColor,
  onConfirm,
  children,
  variant = "filled",
}) => {
  const [opened, { open, close }] = useDisclosure();

  const handleConfirm = React.useCallback(() => {
    close();
    onConfirm();
  }, [close, onConfirm]);

  return (
    <>
      <Modal opened={opened} onClose={close} p="sm" withCloseButton={false}>
        <Text mb="xl">{text}</Text>
        <Flex gap="md" justify="flex-end">
          <Button variant="outline" onClick={close}>
            Cancel
          </Button>
          <Button color={buttonColor} onClick={handleConfirm}>
            {buttonText}
          </Button>
        </Flex>
      </Modal>
      <Button variant={variant} color={buttonColor} onClick={open}>
        {children}
      </Button>
    </>
  );
};