New Changes with Model

src/components/ColorSwitcher.astro

@@ -106,7 +106,7 @@ const item =
     )}
 
     <div
-      class="wr:absolute wr:right-0 wr:z-50 wr:w-56 wr:border-border wr:bg-popover/90 wr:backdrop-blur-md wr:text-popover-foreground wr:p-1.5 wr:origin-top-right wr:scale-95 wr:duration-150 wr:ease-out wr:transition-[opacity,margin] wr:border wr:border-gray-100 wr:duration wr:hs-dropdown-open:opacity-100 wr:opacity-0 wr:hidden wr:min-w-60 wr:bg-white wr:shadow-md wr:rounded-lg wr:mt-2 wr:dark:bg-neutral-800 wr:dark:border wr:dark:border-neutral-700 wr:dark:divide-neutral-700 wr:after:h-4 wr:after:absolute wr:after:-bottom-4 wr:after:start-0 wr:after:w-full wr:before:h-4 wr:before:absolute wr:before:-top-4 wr:before:start-0 wr:before:w-full"
+      class="wr:absolute wr:right-0 wr:z-50 wr:w-56 wr:backdrop-blur-md wr:text-popover-foreground wr:p-1.5 wr:origin-top-right wr:scale-95 wr:duration-150 wr:ease-out wr:transition-[opacity,margin] wr:border wr:border-gray-100 wr:duration wr:hs-dropdown-open:opacity-100 wr:opacity-0 wr:hidden wr:min-w-60 wr:bg-white wr:shadow-md wr:rounded-lg wr:mt-2 wr:dark:bg-neutral-800 wr:dark:border wr:dark:border-neutral-700 wr:dark:divide-neutral-700 wr:after:h-4 wr:after:absolute wr:after:-bottom-4 wr:after:start-0 wr:after:w-full wr:before:h-4 wr:before:absolute wr:before:-top-4 wr:before:start-0 wr:before:w-full"
       role="menu"
       aria-label="Brand color"
       data-menu-panel

src/components/Modal.astro

@@ -0,0 +1,98 @@
+---
+import { cn } from "../utils/cn";
+
+interface Props {
+    id: string;
+    open: boolean;
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    position?: "center" | "top" | "bottom";
+    closedby?: "none" | "closerequest" | "any";
+    onClose?: () => void;
+    dialogClass?: string;
+}
+
+const {
+    id,
+    size = "md",
+    position = "center",
+    open,
+    onClose,
+    closedby = "none",
+    dialogClass = "",
+} = Astro.props;
+---
+
+<div>
+    <div id={`trigger-${id}`} class="wr:w-fit">
+        <slot name="trigger" />
+    </div>
+    <dialog
+        open={open}
+        id={`modal-${id}`}
+        closedby={closedby}
+        class={cn(
+            "wr:absolute wr:rounded-md wr:shadow-lg wr:p-4 wr:bg-white wr:dark:bg-neutral-800 wr:m-0 wr:border-0",
+            size === "sm" && "wr:w-[300px]",
+            size === "md" && "wr:w-[500px]",
+            size === "lg" && "wr:w-[700px]",
+            size === "xl" && "wr:w-[900px]",
+            size === "full" &&
+                "wr:w-full wr:h-screen wr:max-w-none wr:rounded-none wr:inset-0",
+            position == "center" &&
+                size !== "full" &&
+                "wr:top-1/2 wr:left-1/2 wr:-translate-x-1/2 wr:-translate-y-1/2",
+            position == "top" && size !== "full" && "wr:top-[30px] wr:mx-auto",
+            position == "bottom" &&
+                size !== "full" &&
+                "wr:bottom-0 wr:top-[95%] wr:mx-auto wr:-translate-y-full",
+            dialogClass,
+        )}
+    >
+        <slot name="content" />
+    </dialog>
+</div>
+
+<style>
+    dialog::backdrop {
+        background-color: transparent;
+        transition:
+            display 0.7s allow-discrete,
+            overlay 0.7s allow-discrete,
+            background-color 0.7s;
+    }
+
+    dialog:open::backdrop {
+        background-color: rgb(0 0 0 / 25%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    @starting-style {
+        dialog:open::backdrop {
+            background-color: transparent;
+        }
+    }
+</style>
+
+<script type="module" is:inline define:vars={{ id, onClose }}>
+    const trigger = document.getElementById(`trigger-${id}`);
+    const modal = document.getElementById(`modal-${id}`);
+    const close = document.getElementById(`close-${id}`);
+
+    trigger?.addEventListener("click", () => {
+        if (!modal.open) {
+            modal?.showModal();
+        }
+    });
+
+    modal?.addEventListener("close", () => {
+        if (onClose) {
+            onClose(modal);
+        }
+    });
+
+    close?.addEventListener("click", () => {
+        modal?.close();
+    });
+</script>