Updates

2026-03-04 17:35:14 +01:00
parent f73b56cdc4
commit db26e26495
113 changed files with 12433 additions and 169 deletions
@@ -0,0 +1,65 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+import ReactDOM from "react-dom";
+import Button from "../layout/Button";
+import { X } from "lucide-react";
+import { TWUI_MODAL_PROPS } from "../elements/Modal";
+import Paper from "../elements/Paper";
+import _ from "lodash";
+
+type Props = TWUI_MODAL_PROPS & {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+/**
+ * # Modal Main Component
+ */
+export default function ModalComponent({ open, setOpen, ...props }: Props) {
+    if (!open) return null;
+
+    return ReactDOM.createPortal(
+        <div
+            className={twMerge(
+                "fixed z-[200] top-0 left-0 w-screen h-screen",
+                "flex flex-col items-center justify-center p-4",
+                "twui-modal-root"
+            )}
+            role="dialog"
+            aria-modal="true"
+        >
+            <div
+                className={twMerge(
+                    "absolute top-0 left-0 bg-dark/80 z-0",
+                    "w-screen h-screen"
+                )}
+                onClick={(e) => {
+                    setOpen(false);
+                }}
+            ></div>
+            <Paper
+                {..._.omit(props, ["targetWrapperProps"])}
+                className={twMerge(
+                    "z-10 max-w-modal bg-background-light dark:bg-background-dark",
+                    "w-full relative max-h-[95vh] overflow-y-auto",
+                    "twui-modal-content",
+                    props.className
+                )}
+            >
+                {props.children}
+                <Button
+                    className="absolute top-0 right-0 p-2"
+                    variant="ghost"
+                    color="gray"
+                    onClick={() => {
+                        setOpen(false);
+                    }}
+                    title="Close Modal Button"
+                >
+                    <X size={30} />
+                </Button>
+            </Paper>
+        </div>,
+        document.getElementById("twui-modal-root") as HTMLElement
+    );
+}