Update modal

src/components/modal/Modal.tsx

@@ -12,6 +12,13 @@ export default function Modal(props: ModalProps){
 		className,
 		children
 	} = props;
+	const divProps = {...props};
+	delete divProps["children"];
+	delete divProps["display"];
+	delete divProps["backgroundType"];
+	delete divProps["backgroundClassName"];
+	delete divProps["close"];
+	delete divProps["className"];
 
 
 	return (
@@ -25,7 +32,7 @@ export default function Modal(props: ModalProps){
 						close={close}
 					/>
 					<div
-						{...props}
+						{...divProps}
 						className={clsx(
 							"fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50",
 							"flex flex-col rounded-lg max-h-full shadow-lg shadow-[#00000066]",

src/components/modal/ModalBackground.tsx

@@ -8,6 +8,10 @@ export default function ModalBackground(props: ModalBackgroundProps){
 		close,
 		className
 	} = props;
+	const divProps = { ...props };
+	delete divProps["backgroundType"];
+	delete divProps["close"];
+	delete divProps["className"];
 
 
 	if(backgroundType === "none"){
@@ -17,7 +21,7 @@ export default function ModalBackground(props: ModalBackgroundProps){
 
 	return (
 		<div
-			{...props}
+			{...divProps}
 			className={clsx(
 				"fixed left-0 top-0 w-full h-full z-40",
 				"flex flex-row justify-center items-center",

src/components/modal/ModalHeader.tsx

@@ -9,11 +9,15 @@ export default function ModalHeader(props: ModalHeaderProps){
 		className,
 		children
 	} = props;
+	const divProps = {...props};
+	delete divProps["close"];
+	delete divProps["className"];
+	delete divProps["children"];
 
 
 	return (
 		<div
-			{...props}
+			{...divProps}
 			className={clsx(
 				"flex flex-row justify-center w-full rounded-t-lg",
 				className

src/index.css

@@ -34,7 +34,6 @@ a.active {
 }
 
 body {
-	display: flex;
 	place-items: center;
 	min-width: 320px;
 	min-height: 100vh;

src/interface/ModalInterfaces.ts

@@ -7,14 +7,14 @@ export type ModalHeaderFooterBackgroundType = "darken" | "lighten" | "none";
 
 export interface ModalBackgroundProps extends HTMLProps<HTMLDivElement>{
 	backgroundType?: ModalBackgroundType;
-	close: () => void;
+	close?: () => void;
 }
 
 export interface ModalProps extends HTMLProps<HTMLDivElement>{
-	display: boolean;
+	display?: boolean;
 	backgroundType?: ModalBackgroundType;
 	backgroundClassName?: string;
-	close: () => void;
+	close?: () => void;
 	children: React.ReactNode;
 }
 

src/pages/public/HomePage.tsx

@@ -20,7 +20,7 @@ export default function HomePage(){
 
 	return (
 		<main>
-			Home Page
+			<div>Home Page</div>
 			<button
 				onClick={showModal}
 			>
@@ -29,7 +29,8 @@ export default function HomePage(){
 			<Modal
 				display={displayModal}
 				close={hideModal}
-				backgroundType="darken-blur"
+				backgroundType="lighten"
+				className="bg-(--bg-color) text-(--text-color)"
 			>
 				<ModalHeader
 					close={hideModal}