MattrixwvReactComponents/lib/component/modal/Modal.tsx

import type { ModalProps } from "$/types/Modal";
import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
import clsx from "clsx";


export default function Modal(props: ModalProps){
	const {
		display,
		onClose,
		className,
		backgroundType = "blur",
		top,
		children
	} = props;


	return (
		<Dialog
			open={display}
			onClose={onClose}
		>
			{/* Backdrop as fixed sibling to the panel */}
			{
				backgroundType !== "none" &&
				<DialogBackdrop
					className={clsx(
						"fixed inset-0",
						{
							"bg-black/25": backgroundType === "darken",
							"bg-white/25": backgroundType === "lighten",
							"backdrop-blur-sm bg-radial-[circle] from-transparent to-black/25": backgroundType === "darken-blur-radial",
							"backdrop-blur-sm bg-radial-[circle] from-transparent to-white/25": backgroundType === "lighten-blur-radial",
							"backdrop-blur-sm bg-black/25": backgroundType === "darken-blur",
							"backdrop-blur-sm bg-white/25": backgroundType === "lighten-blur",
							"bg-transparent": backgroundType === "transparent",
							"backdrop-blur-sm": backgroundType === "blur"
						}
					)}
				/>
			}

			{/* Full-screen container to center the panel */}
			<div
				className={clsx(
					"fixed top-0 left-0 h-full w-full",
					"flex flex-col items-center justify-start",
					{
						"pt-16": top
					}
				)}
			>
				{/* The actual modal panel */}
				<DialogPanel
					className={clsx(
						"relative max-w-full max-h-full rounded-lg",
						"flex flex-col items-center justify-start",
						"shadow-lg shadow-black/40",
						className,
						{
							"top-1/2 -translate-y-1/2": !top,
							"top-0": top
						}
					)}
				>
					{/* Content of the modal */}
					{children}
				</DialogPanel>
			</div>
		</Dialog>
	);
}