126 lines
2.9 KiB
TypeScript
126 lines
2.9 KiB
TypeScript
import React from "react";
|
|
|
|
import { DialogBody, HStack, Icon, Text } from "@chakra-ui/react";
|
|
import { Button } from "./ui/button";
|
|
import {
|
|
DialogActionTrigger,
|
|
DialogCloseTrigger,
|
|
DialogContent,
|
|
DialogRoot,
|
|
DialogTrigger,
|
|
} from "./ui/dialog";
|
|
|
|
interface DeleteConfirmationDialogProps {
|
|
onConfirm?: () => void;
|
|
alertText?: string;
|
|
alertCaption?: string;
|
|
alertIcon?: any;
|
|
AltertTiggerIcon?: any;
|
|
button?: any;
|
|
iconColor?: string;
|
|
}
|
|
|
|
const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
|
|
onConfirm,
|
|
alertText,
|
|
alertCaption,
|
|
alertIcon,
|
|
AltertTiggerIcon,
|
|
button,
|
|
iconColor,
|
|
}) => {
|
|
return (
|
|
<DialogRoot
|
|
placement={"center"}
|
|
motionPreset="slide-in-bottom"
|
|
size={"xs"}
|
|
role="alertdialog"
|
|
>
|
|
<DialogTrigger asChild>
|
|
{button ? (
|
|
button
|
|
) : (
|
|
<Icon
|
|
cursor={"pointer"}
|
|
p={0.5}
|
|
_hover={{ bg: "#00000015" }}
|
|
rounded={"md"}
|
|
boxSize={5}
|
|
color={iconColor && iconColor}
|
|
>
|
|
<AltertTiggerIcon />
|
|
</Icon>
|
|
)}
|
|
</DialogTrigger>
|
|
<DialogContent bgColor="#fff">
|
|
{/* <DialogHeader display="flex" justifyContent="center"> */}
|
|
{/* <Image src={alertIcon} h={"39px"} /> */}
|
|
|
|
{/* </DialogHeader> */}
|
|
<DialogBody
|
|
display="flex"
|
|
flexDirection="column"
|
|
alignItems="center"
|
|
color="black"
|
|
p={8}
|
|
gap={2}
|
|
>
|
|
{alertIcon && alertIcon}
|
|
<Text
|
|
mt={3}
|
|
fontWeight={600}
|
|
fontSize="sm"
|
|
color="#000000"
|
|
textAlign="center"
|
|
as={"span"}
|
|
>
|
|
{alertText}
|
|
</Text>
|
|
<Text
|
|
as={"span"}
|
|
fontSize="sm"
|
|
style={{ textAlign: "center", color: "#000000CC", width: "100%" }}
|
|
>
|
|
{" "}
|
|
{alertCaption}
|
|
</Text>
|
|
<HStack mt={2} w={"100%"}>
|
|
<DialogActionTrigger asChild>
|
|
<Button
|
|
width="50%"
|
|
color="black"
|
|
_hover={{ bgColor: "white" }}
|
|
variant="outline"
|
|
borderRadius="sm"
|
|
border="1px solid #007F33"
|
|
size={"xs"}
|
|
>
|
|
No
|
|
</Button>
|
|
</DialogActionTrigger>
|
|
<Button
|
|
borderRadius="sm"
|
|
width="50%"
|
|
bgColor="#007F33"
|
|
color="white"
|
|
// colorPalette="#007F33"
|
|
onClick={onConfirm}
|
|
size={"xs"}
|
|
>
|
|
Yes{" "}
|
|
</Button>
|
|
</HStack>
|
|
</DialogBody>
|
|
|
|
<DialogCloseTrigger
|
|
_hover={{ bg: "#00000010" }}
|
|
color={"#000"}
|
|
colorPalette={"bg"}
|
|
/>
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
);
|
|
};
|
|
|
|
export default AlertDailog;
|