Create modal component

src/components/modal/Modal.tsx

@@ -28,7 +28,7 @@ export default function Modal(props: ModalProps){
 						{...props}
 						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] bg-neutral-800",
+							"flex flex-col rounded-lg max-h-full shadow-lg shadow-[#00000066]",
 							className
 						)}
 					>

src/components/modal/ModalBackground.tsx

@@ -25,8 +25,8 @@ export default function ModalBackground(props: ModalBackgroundProps){
 				{
 					"bg-[#00000044]": backgroundType === "darken",
 					"bg-[#FFFFFF44]": backgroundType === "lighten",
-					"backdrop-blur-sm bg-radial from-transparent to-[#00000066]": backgroundType === "darken-blur",
+					"backdrop-blur-sm bg-radial-[circle] from-transparent from-25% to-[#00000066]": backgroundType === "darken-blur",
-					"backdrop-blur-sm bg-radial from-transparent to-[#FFFFFF66]": backgroundType === "lighten-blur",
+					"backdrop-blur-sm bg-radial-[circle] from-transparent from-25% to-[#FFFFFF66]": backgroundType === "lighten-blur",
 					"bg-[#00000000]": backgroundType === "transparent",
 					"backdrop-blur-sm": backgroundType === "blur"
 				}

src/components/modal/ModalBody.tsx

@@ -1,8 +1,8 @@
-import { ModalBodyProps } from "@/interface/ModalInterfaces";
 import clsx from "clsx";
+import { HTMLProps } from "react";
 
 
-export default function ModalBody(props: ModalBodyProps){
+export default function ModalBody(props: HTMLProps<HTMLDivElement>){
 	const {
 		className,
 		children

src/components/modal/ModalFooter.tsx

@@ -1,10 +1,9 @@
-import { ModalFooterProps } from "@/interface/ModalInterfaces";
 import clsx from "clsx";
+import { HTMLProps } from "react";
 
 
-export default function ModalFooter(props: ModalFooterProps){
+export default function ModalFooter(props: HTMLProps<HTMLDivElement>){
 	const {
-		backgroundType = "none",
 		className,
 		children
 	} = props;
@@ -15,11 +14,7 @@ export default function ModalFooter(props: ModalFooterProps){
 			{...props}
 			className={clsx(
 				"flex flex-row justify-center w-full rounded-b-lg",
-				className,
+				className
-				{
-					"bg-[#00000022]": backgroundType === "darken",
-					"bg-[#FFFFFF22]": backgroundType === "lighten"
-				}
 			)}
 		>
 			<div

src/components/modal/ModalHeader.tsx

@@ -5,7 +5,6 @@ import { BsXLg } from "react-icons/bs";
 
 export default function ModalHeader(props: ModalHeaderProps){
 	const {
-		backgroundType = "none",
 		close,
 		className,
 		children
@@ -17,11 +16,7 @@ export default function ModalHeader(props: ModalHeaderProps){
 			{...props}
 			className={clsx(
 				"flex flex-row justify-center w-full rounded-t-lg",
-				className,
+				className
-				{
-					"bg-[#00000022]": backgroundType === "darken",
-					"bg-[#FFFFFF22]": backgroundType === "lighten"
-				}
 			)}
 		>
 			<div

src/interface/ModalInterfaces.ts

@@ -19,16 +19,5 @@ export interface ModalProps extends HTMLProps<HTMLDivElement>{
 }
 
 export interface ModalHeaderProps extends HTMLProps<HTMLDivElement>{
-	backgroundType?: ModalHeaderFooterBackgroundType;
 	close?: () => void;
-	children: React.ReactNode;
-}
-
-export interface ModalBodyProps extends HTMLProps<HTMLDivElement>{
-	children: React.ReactNode;
-}
-
-export interface ModalFooterProps extends HTMLProps<HTMLDivElement>{
-	backgroundType?: ModalHeaderFooterBackgroundType;
-	children: React.ReactNode;
 }

src/pages/public/HomePage.tsx

@@ -33,16 +33,13 @@ export default function HomePage(){
 			>
 				<ModalHeader
 					close={hideModal}
-					backgroundType="lighten"
 				>
 					Header
 				</ModalHeader>
 				<ModalBody>
 					Body
 				</ModalBody>
-				<ModalFooter
+				<ModalFooter>
-					backgroundType="lighten"
-				>
 					Footer
 				</ModalFooter>
 			</Modal>