Most simple components created

lib/component/modal/Modal.tsx

@@ -0,0 +1,71 @@
+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>
+	);
+}