cal.pub0.org/apps/web/components/ui/ModalContainer.tsx

40 lines
1.3 KiB
TypeScript

import classNames from "classnames";
import React from "react";
interface Props extends React.PropsWithChildren<any> {
wide?: boolean;
scroll?: boolean;
noPadding?: boolean;
}
export default function ModalContainer(props: Props) {
return (
<div
className="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
&#8203;
</span>
<div
className={classNames(
"min-w-96 inline-block transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle",
{
"sm:w-full sm:max-w-lg ": !props.wide,
"sm:w-4xl sm:max-w-4xl": props.wide,
"overflow-scroll": props.scroll,
"!p-0": props.noPadding,
}
)}>
{props.children}
</div>
</div>
</div>
);
}