46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
};
|