Most simple components created

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