40 lines
1.3 KiB
TypeScript
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">
|
|
​
|
|
</span>
|
|
<div
|
|
className={classNames(
|
|
"inline-block min-w-96 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>
|
|
);
|
|
}
|