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

src/interface/ModalInterfaces.ts

@@ -0,0 +1,34 @@
+import { HTMLProps } from "react";
+
+
+export type ModalBackgroundType = "darken" | "lighten" | "blur" | "darken-blur" | "lighten-blur" | "transparent" | "none";
+export type ModalHeaderFooterBackgroundType = "darken" | "lighten" | "none";
+
+
+export interface ModalBackgroundProps extends HTMLProps<HTMLDivElement>{
+	backgroundType?: ModalBackgroundType;
+	close: () => void;
+}
+
+export interface ModalProps extends HTMLProps<HTMLDivElement>{
+	display: boolean;
+	backgroundType?: ModalBackgroundType;
+	backgroundClassName?: string;
+	close: () => void;
+	children: React.ReactNode;
+}
+
+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

@@ -1,7 +1,51 @@
+import Modal from "@/components/modal/Modal";
+import ModalBody from "@/components/modal/ModalBody";
+import ModalFooter from "@/components/modal/ModalFooter";
+import ModalHeader from "@/components/modal/ModalHeader";
+import { useState } from "react";
+
+
 export default function HomePage(){
+	const [ displayModal, setDisplayModal ] = useState(false);
+
+
+	const showModal = () => {
+		setDisplayModal(true);
+	}
+
+	const hideModal = () => {
+		setDisplayModal(false);
+	}
+
+
 	return (
 		<main>
 			Home Page
+			<button
+				onClick={showModal}
+			>
+				Modal
+			</button>
+			<Modal
+				display={displayModal}
+				close={hideModal}
+				backgroundType="darken-blur"
+			>
+				<ModalHeader
+					close={hideModal}
+					backgroundType="lighten"
+				>
+					Header
+				</ModalHeader>
+				<ModalBody>
+					Body
+				</ModalBody>
+				<ModalFooter
+					backgroundType="lighten"
+				>
+					Footer
+				</ModalFooter>
+			</Modal>
 		</main>
 	);
 }