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>
+	);
+}

lib/component/modal/ModalBody.tsx

@@ -0,0 +1,22 @@
+import type { ModalBodyProps } from "$/types/Modal";
+import clsx from "clsx";
+
+
+export default function ModalBody(props: ModalBodyProps){
+	const {
+		className,
+		children
+	} = props;
+
+
+	return (
+		<div
+			className={clsx(
+				"flex flex-col items-center justify-start h-full w-full overflow-scroll",
+				className
+			)}
+		>
+			{children}
+		</div>
+	);
+}

lib/component/modal/ModalFooter.tsx

@@ -0,0 +1,26 @@
+import type { ModalFooterProps } from "$/types/Modal";
+import clsx from "clsx";
+
+
+export default function ModalFooter(props: ModalFooterProps){
+	const {
+		className,
+		children
+	} = props;
+
+
+	return (
+		<div
+			className={clsx(
+				"flex flex-row items-center justify-center w-full rounded-b-lg",
+				className
+			)}
+		>
+			<div
+				className="flex flex-row items-center justify-center mx-8 my-3"
+			>
+				{children}
+			</div>
+		</div>
+	);
+}

lib/component/modal/ModalHeader.tsx

@@ -0,0 +1,41 @@
+import type { ModalHeaderProps } from "$/types/Modal";
+import { DialogTitle } from "@headlessui/react";
+import clsx from "clsx";
+import { BsXLg } from "react-icons/bs";
+
+
+export default function ModalHeader(props: ModalHeaderProps){
+	const {
+		onClose,
+		className,
+		children
+	} = props;
+
+
+	return (
+		<div
+			className={clsx(
+				"flex flex-row items-center justify-center w-full rounded-t-lg",
+				className
+			)}
+		>
+			<DialogTitle
+				as="div"
+				className="flex flex-row items-center justify-center mx-8 my-3"
+			>
+				{children}
+			</DialogTitle>
+			{
+				onClose &&
+				<div
+					className="absolute top-1 right-1 cursor-pointer"
+					onClick={onClose}
+				>
+					<BsXLg
+						size={20}
+					/>
+				</div>
+			}
+		</div>
+	);
+}