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

lib/component/nav/DarkModeSwitch.tsx

@@ -8,7 +8,7 @@ export default function DarkModeSwitch(){
 
 	const updateTheme = () => {
 		if(theme === "system"){
-			if(window.document.documentElement.classList.contains("dark")){
+			if(globalThis.document.documentElement.classList.contains("dark")){
 				setTheme("light");
 			}
 			else{

lib/component/nav/NavBar.tsx

@@ -2,13 +2,11 @@ import type { NavBarProps } from "$/types/NavTypes";
 import clsx from "clsx";
 
 
-export default function NavBar(props: NavBarProps){
-	const {
-		className,
-		children
-	} = props;
-
-
+export default function NavBar({
+	className,
+	children,
+	...props
+}: Readonly<NavBarProps>){
 	return (
 		<nav
 			className={clsx(
@@ -16,6 +14,7 @@ export default function NavBar(props: NavBarProps){
 				"fixed top-0 left-0 w-full z-10",
 				"flex flex-row flex-nowrap items-center justify-center"
 			)}
+			{...props}
 		>
 			{children}
 		</nav>

lib/component/nav/PopoverMenu.tsx

@@ -3,14 +3,11 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import clsx from "clsx";
 import { RiArrowRightSLine } from "react-icons/ri";
 
-export default function PopoverMenu(props: PopoverMenuProps){
-	const {
-		buttonContent,
-		anchor,
-		children
-	} = props;
-
-
+export default function PopoverMenu({
+	buttonContent,
+	anchor,
+	children
+}: Readonly<PopoverMenuProps>){
 	return (
 		<Popover>
 			<PopoverButton

lib/component/tab/MattrixwvTab.tsx

@@ -3,12 +3,9 @@ import { Tab } from "@headlessui/react";
 import clsx from "clsx";
 
 
-export default function MattrixwvTab(props: MattrixwvTabProps){
-	const {
-		children
-	} = props;
-
-
+export default function MattrixwvTab({
+	children
+}: Readonly<MattrixwvTabProps>){
 	return (
 		<Tab
 			className={clsx(

lib/component/tab/MattrixwvTabGroup.tsx

@@ -7,13 +7,10 @@ import MattrixwvTabPanel from "./MattrixwvTabPanel";
 import MattrixwvTabPanels from "./MattrixwvTabPanels";
 
 
-export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
-	const {
-		tabs,
-		className
-	} = props;
-
-
+export default function MattrixwvTabGroup({
+	tabs,
+	className
+}: Readonly<MattrixwvTabGroupProps>){
 	return (
 		<TabGroup
 			className={clsx(
@@ -24,9 +21,7 @@ export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
 			<MattrixwvTabList>
 				{
 					tabs.map((tab, index) => (
-						<MattrixwvTab
-							key={index}
-						>
+						<MattrixwvTab key={index}>
 							{tab.tab}
 						</MattrixwvTab>
 					))
@@ -35,9 +30,7 @@ export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
 			<MattrixwvTabPanels>
 				{
 					tabs.map((tab, index) => (
-						<MattrixwvTabPanel
-							key={index}
-						>
+						<MattrixwvTabPanel key={index}>
 							{tab.content}
 						</MattrixwvTabPanel>
 					))

lib/component/tab/MattrixwvTabList.tsx

@@ -2,16 +2,11 @@ import type { MattrixwvTabListProps } from "$/types/TabTypes";
 import { TabList } from "@headlessui/react";
 
 
-export default function MattrixwvTabList(props: MattrixwvTabListProps){
-	const {
-		children
-	} = props;
-
-
+export default function MattrixwvTabList({
+	children
+}: Readonly<MattrixwvTabListProps>){
 	return (
-		<TabList
-			className="flex flex-row items-center justify-start w-full border-b"
-		>
+		<TabList className="flex flex-row items-center justify-start w-full border-b">
 			{children}
 		</TabList>
 	);

lib/component/tab/MattrixwvTabPanel.tsx

@@ -2,16 +2,11 @@ import type { MattrixwvTabPanelProps } from "$/types/TabTypes";
 import { TabPanel } from "@headlessui/react";
 
 
-export default function MattrixwvTabPanel(props: MattrixwvTabPanelProps){
-	const {
-		children
-	} = props;
-
-
+export default function MattrixwvTabPanel({
+	children
+}: Readonly<MattrixwvTabPanelProps>){
 	return (
-		<TabPanel
-			className="flex flex-row items-start justify-center w-full h-full"
-		>
+		<TabPanel className="flex flex-row items-start justify-center w-full h-full">
 			{children}
 		</TabPanel>
 	);

lib/component/tab/MattrixwvTabPanels.tsx

@@ -2,16 +2,11 @@ import type { MattrixwvTabPanelsProps } from "$/types/TabTypes";
 import { TabPanels } from "@headlessui/react";
 
 
-export default function MattrixwvTabPanels(props: MattrixwvTabPanelsProps){
-	const {
-		children
-	} = props;
-
-
+export default function MattrixwvTabPanels({
+	children
+}: Readonly<MattrixwvTabPanelsProps>){
 	return (
-		<TabPanels
-			className="flex flex-row items-start justify-center w-full h-full overflow-scroll"
-		>
+		<TabPanels className="flex flex-row items-start justify-center w-full h-full overflow-scroll">
 			{children}
 		</TabPanels>
 	);

lib/component/toaster/Toaster.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 export default function Toaster({
 	toast,
 	className
-}: ToasterProps){
+}: Readonly<ToasterProps>){
 	return (
 		<Transition
 			show={toast.length > 1 || (toast.length === 1 && toast[0].hideTime > new Date())}