RaidBuilder/RaidBuilderWeb
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Create modal component

Browse Source
This commit is contained in:
Mattrixwv
2025-02-25 22:03:38 -05:00
parent eba1676c15
commit f6982951eb
7 changed files with 10 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modal/Modal.tsx
View File

@@ -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
)}
>

4
src/components/modal/ModalBackground.tsx
View File

@@ -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 from-transparent to-[#FFFFFF66]": backgroundType === "lighten-blur",
"backdrop-blur-sm bg-radial-[circle] from-transparent from-25% to-[#00000066]": backgroundType === "darken-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"
}

4
src/components/modal/ModalBody.tsx
View File

@@ -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

11
src/components/modal/ModalFooter.tsx
View File

@@ -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,
{
"bg-[#00000022]": backgroundType === "darken",
"bg-[#FFFFFF22]": backgroundType === "lighten"
}
className
)}
>
<div

7
src/components/modal/ModalHeader.tsx
View File

@@ -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,
{
"bg-[#00000022]": backgroundType === "darken",
"bg-[#FFFFFF22]": backgroundType === "lighten"
}
className
)}
>
<div