72 lines
1.5 KiB
TypeScript
72 lines
1.5 KiB
TypeScript
import { Box, Button, Group, Modal, Text } from "@mantine/core";
|
|
import { useState } from "react";
|
|
const DialogConfirm = ({
|
|
opened,
|
|
close,
|
|
message,
|
|
handle,
|
|
}: {
|
|
opened: boolean;
|
|
close: () => void;
|
|
message: string;
|
|
handle: () => void;
|
|
centered?: boolean;
|
|
bottom?: boolean;
|
|
}) => {
|
|
const [disableBtn, setDisableBtn] = useState(false);
|
|
return (
|
|
<Box>
|
|
<Modal
|
|
style={{ position: "absolute", left: 0, border: "solid 2px #ff6c6b" }}
|
|
title="Confirm"
|
|
opened={opened}
|
|
centered
|
|
withCloseButton
|
|
shadow="md"
|
|
onClose={close}
|
|
size="xs"
|
|
radius="md"
|
|
>
|
|
<Text
|
|
size="sm"
|
|
mb={"xl"}
|
|
fw={700}
|
|
c={"#ff6c6b"}
|
|
style={{ textAlign: "center", fontSize: "18px" }}
|
|
>
|
|
{message}
|
|
</Text>
|
|
|
|
<Group style={{ display: "flex", justifyContent: "center" }}>
|
|
<Button
|
|
variant="gradient"
|
|
gradient={{ from: "pink", to: "red", deg: 90 }}
|
|
size="xs"
|
|
disabled={disableBtn}
|
|
onClick={async () => {
|
|
setDisableBtn(true);
|
|
await handle();
|
|
setDisableBtn(false);
|
|
close();
|
|
}}
|
|
>
|
|
Yes
|
|
</Button>
|
|
|
|
<Button
|
|
variant="gradient"
|
|
size="xs"
|
|
onClick={async () => {
|
|
close();
|
|
}}
|
|
>
|
|
No
|
|
</Button>
|
|
</Group>
|
|
</Modal>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default DialogConfirm;
|