"use client"; import * as Dialog from "@radix-ui/react-dialog"; import { AnimatePresence, motion } from "framer-motion"; import { ReactNode, useState } from "react"; import { useTranslation } from "react-i18next"; import { MdClose } from "react-icons/md"; import Button from "./Button"; type CommonModalProps = { title?: string; desc?: string; children?: ReactNode; Trigger: ReactNode; CloseTrigger?: ReactNode; isOpen?: undefined; setOpen?: undefined; }; type ModalProps = | CommonModalProps | (Omit & { isOpen: boolean; setOpen: (isOpen: boolean) => void; }); export const Modal = ({ title, desc, children, Trigger, CloseTrigger, isOpen: customIsOpen, setOpen: customSetOpen, }: ModalProps): JSX.Element => { const [isOpen, setOpen] = useState(false); const { t } = useTranslation(["translation"]); return ( {Trigger} {customIsOpen ?? isOpen ? ( {title} {desc} {children} {CloseTrigger !== undefined ? ( CloseTrigger ) : ( )} ) : null} ); };