60 lines
No EOL
2.4 KiB
TypeScript
60 lines
No EOL
2.4 KiB
TypeScript
import { type FC, type JSX } from "react";
|
|
import classNames from "classnames";
|
|
import Button from "@/components/ui/Button"
|
|
|
|
interface ModalProps {
|
|
buttonChildren?: JSX.Element;
|
|
buttonClassName?: string;
|
|
buttonLabel?: string;
|
|
modalChildren: JSX.Element;
|
|
modalOpen?: boolean;
|
|
setModalOpen: (open: boolean) => void;
|
|
}
|
|
|
|
const Modal: FC<ModalProps> = ({
|
|
buttonLabel,
|
|
buttonClassName,
|
|
modalChildren,
|
|
modalOpen,
|
|
buttonChildren,
|
|
setModalOpen,
|
|
}) => {
|
|
const buttonStyles = classNames(buttonClassName, 'anta-regular');
|
|
|
|
const closeModal = () => {
|
|
setModalOpen(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button variant="primary" appearance="outline" type="button" onClick={() => setModalOpen(true)} className={buttonStyles}>
|
|
{buttonChildren
|
|
? buttonChildren
|
|
: buttonLabel ?? 'button'
|
|
}
|
|
</Button>
|
|
|
|
{/*<Dialog open={modalOpen} onClose={setModalOpen} className="relative z-10">*/}
|
|
{/* <DialogBackdrop*/}
|
|
{/* transition*/}
|
|
{/* className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"*/}
|
|
{/* />*/}
|
|
{/* <div className="fixed inset-0 z-10 w-screen overflow-y-auto">*/}
|
|
{/* <div*/}
|
|
{/* className="flex min-h-full items-start mt-5 justify-center p-4 text-center sm:items-center sm:p-0">*/}
|
|
{/* <DialogPanel*/}
|
|
{/* transition*/}
|
|
{/* className="relative transform overflow-hidden rounded-lg bg-primary text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg data-closed:sm:translate-y-0 data-closed:sm:scale-95"*/}
|
|
{/* >*/}
|
|
{/* <XMarkIcon width={24} className="absolute top-4 right-4 cursor-pointer"*/}
|
|
{/* onClick={() => closeModal()}/>*/}
|
|
{/* {modalChildren}*/}
|
|
{/* </DialogPanel>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/*</Dialog>*/}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Modal; |