36 lines
988 B
TypeScript
36 lines
988 B
TypeScript
import React from "react";
|
|
import { useDisclosure } from "@mantine/hooks";
|
|
|
|
import { Button, Modal, Text, Flex } from "@mantine/core";
|
|
|
|
export const ConfirmDialogButton: React.FC<{
|
|
text: string;
|
|
buttonText: string;
|
|
buttonColor: string;
|
|
onConfirm: () => void;
|
|
children: React.ReactNode;
|
|
}> = ({ text, buttonText, buttonColor, onConfirm, children }) => {
|
|
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 onClick={close}>Cancel</Button>
|
|
<Button color={buttonColor} onClick={handleConfirm}>
|
|
{buttonText}
|
|
</Button>
|
|
</Flex>
|
|
</Modal>
|
|
<Button color={buttonColor} onClick={open}>
|
|
{children}
|
|
</Button>
|
|
</>
|
|
);
|
|
};
|