Modal initial comit

src/components/modal/Modal.tsx

@@ -0,0 +1,41 @@
+import { ModalProps } from "@/interface/ModalInterfaces";
+import clsx from "clsx";
+import ModalBackground from "./ModalBackground";
+
+
+export default function Modal(props: ModalProps){
+	const {
+		display,
+		backgroundType = "blur",
+		backgroundClassName,
+		close,
+		className,
+		children
+	} = props;
+
+
+	return (
+		<>
+			{
+				display &&
+				<>
+					<ModalBackground
+						backgroundType={backgroundType}
+						className={backgroundClassName}
+						close={close}
+					/>
+					<div
+						{...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",
+							className
+						)}
+					>
+						{children}
+					</div>
+				</>
+			}
+		</>
+	);
+}

src/components/modal/ModalBackground.tsx

@@ -0,0 +1,37 @@
+import { ModalBackgroundProps } from "@/interface/ModalInterfaces";
+import clsx from "clsx";
+
+
+export default function ModalBackground(props: ModalBackgroundProps){
+	const {
+		backgroundType = "blur",
+		close,
+		className
+	} = props;
+
+
+	if(backgroundType === "none"){
+		return (<></>);
+	}
+
+
+	return (
+		<div
+			{...props}
+			className={clsx(
+				"fixed left-0 top-0 w-full h-full z-40",
+				"flex flex-row justify-center items-center",
+				className,
+				{
+					"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 from-transparent to-[#FFFFFF66]": backgroundType === "lighten-blur",
+					"bg-[#00000000]": backgroundType === "transparent",
+					"backdrop-blur-sm": backgroundType === "blur"
+				}
+			)}
+			onClick={close}
+		/>
+	);
+}

src/components/modal/ModalBody.tsx

@@ -0,0 +1,23 @@
+import { ModalBodyProps } from "@/interface/ModalInterfaces";
+import clsx from "clsx";
+
+
+export default function ModalBody(props: ModalBodyProps){
+	const {
+		className,
+		children
+	} = props;
+
+
+	return (
+		<div
+			{...props}
+			className={clsx(
+				"flex flex-col items-center px-8 py-4 overflow-auto",
+				className
+			)}
+		>
+			{children}
+		</div>
+	);
+}

src/components/modal/ModalFooter.tsx

@@ -0,0 +1,32 @@
+import { ModalFooterProps } from "@/interface/ModalInterfaces";
+import clsx from "clsx";
+
+
+export default function ModalFooter(props: ModalFooterProps){
+	const {
+		backgroundType = "none",
+		className,
+		children
+	} = props;
+
+
+	return (
+		<div
+			{...props}
+			className={clsx(
+				"flex flex-row justify-center w-full rounded-b-lg",
+				className,
+				{
+					"bg-[#00000022]": backgroundType === "darken",
+					"bg-[#FFFFFF22]": backgroundType === "lighten"
+				}
+			)}
+		>
+			<div
+				className="flex flex-row justify-center mx-8 my-3"
+			>
+				{children}
+			</div>
+		</div>
+	);
+}

src/components/modal/ModalHeader.tsx

@@ -0,0 +1,45 @@
+import { ModalHeaderProps } from "@/interface/ModalInterfaces";
+import clsx from "clsx";
+import { BsXLg } from "react-icons/bs";
+
+
+export default function ModalHeader(props: ModalHeaderProps){
+	const {
+		backgroundType = "none",
+		close,
+		className,
+		children
+	} = props;
+
+
+	return (
+		<div
+			{...props}
+			className={clsx(
+				"flex flex-row justify-center w-full rounded-t-lg",
+				className,
+				{
+					"bg-[#00000022]": backgroundType === "darken",
+					"bg-[#FFFFFF22]": backgroundType === "lighten"
+				}
+			)}
+		>
+			<div
+				className="flex flex-row justify-center mx-8 my-3"
+			>
+				{children}
+			</div>
+			{
+				close &&
+				<div
+					className="absolute top-1 right-1 cursor-pointer"
+					onClick={close}
+				>
+					<BsXLg
+						size={20}
+					/>
+				</div>
+			}
+		</div>
+	);
+}