1  import { Fragment } from "react";
 2  import * as Dialog from "@radix-ui/react-dialog";
 3  
 4  interface ModalProps {
 5    open: boolean;
 6    width?: string;
 7    height?: string;
 8    top?: string;
 9    background?: string;
10    padding?: string;
11    rounded?: string;
12    text?: string;
13    border?: string;
14    children: any;
15  }
16  
17  const Modal = ({
18    open,
19    width = "w-[32rem]",
20    height = "",
21    top = "top-[50%]",
22    text = "text-PrimaryTextColorLight dark:text-PrimaryTextColor",
23    background = "bg-PrimaryColorLight dark:bg-PrimaryColor",
24    padding = "p-6",
25    rounded = "rounded-lg",
26    border = "",
27    children,
28  }: ModalProps) => {
29    return (
30      <Fragment>
31        <Dialog.Root open={open}>
32          <Dialog.Portal>
33            <Dialog.Overlay className=" bg-black/50 data-[state=open]:animate-overlayShow fixed inset-0 z-[1999]" />
34            <Dialog.Content
35              className={`fixed ${top} left-[50%] outline-none shadow-md z-[2000] `}
36            >
37              <div
38                className={`absolute flex flex-col justify-start items-start text-lg translate-x-[-50%] translate-y-[-50%] ${width} ${height}  ${background} ${padding} ${rounded} ${text} ${border}`}
39              >
40                {children}
41              </div>
42            </Dialog.Content>
43          </Dialog.Portal>
44        </Dialog.Root>
45      </Fragment>
46    );
47  };
48  
49  export default Modal;