Update various components

lib/component/modal/Modal.tsx

@@ -3,17 +3,14 @@ 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;
-
-
+export default function Modal({
+	display,
+	onClose,
+	className,
+	backgroundType = "blur",
+	top,
+	children
+}: Readonly<ModalProps>){
 	return (
 		<Dialog
 			open={display}

lib/component/modal/ModalBody.tsx

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

lib/component/modal/ModalFooter.tsx

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

lib/component/modal/ModalHeader.tsx

@@ -1,23 +1,23 @@
+import Button from "$/component/button/Button";
 import type { ModalHeaderProps } from "$/types/ModalTypes";
 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;
-
-
+export default function ModalHeader({
+	onClose,
+	className,
+	children,
+	...props
+}: Readonly<ModalHeaderProps>){
 	return (
 		<div
 			className={clsx(
 				"flex flex-row items-center justify-center w-full rounded-t-lg",
 				className
 			)}
+			{...props}
 		>
 			<DialogTitle
 				as="div"
@@ -27,14 +27,14 @@ export default function ModalHeader(props: ModalHeaderProps){
 			</DialogTitle>
 			{
 				onClose &&
-				<div
+				<Button
 					className="absolute top-1 right-1 cursor-pointer"
 					onClick={onClose}
 				>
 					<BsXLg
 						size={20}
 					/>
-				</div>
+				</Button>
 			}
 		</div>
 	);