dialog component

packages/frontend/package.json

@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "@issue/shared": "workspace:*",
+        "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-select": "^2.2.6",

packages/frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,131 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+    return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+    return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+    return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+    return (
+        <DialogPrimitive.Overlay
+            data-slot="dialog-overlay"
+            className={cn("fixed inset-0 z-50 bg-black/50", className)}
+            {...props}
+        />
+    );
+}
+
+function DialogContent({
+    className,
+    children,
+    showCloseButton = true,
+    ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}) {
+    return (
+        <DialogPortal data-slot="dialog-portal">
+            <DialogOverlay />
+            <DialogPrimitive.Content
+                data-slot="dialog-content"
+                className={cn(
+                    "bg-background data-[state=closed]:zoom-out-95",
+                    "data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%]",
+                    "z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+                    "gap-4 border p-4 shadow-lg duration-200 outline-none sm:max-w-lg",
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                {showCloseButton && (
+                    <DialogPrimitive.Close
+                        data-slot="dialog-close"
+                        className={cn(
+                            "cursor-pointer ring-offset-background focus:ring-ring",
+                            "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+                            "absolute top-4 right-4 opacity-70",
+                            "hover:opacity-100 focus:ring-2 focus:ring-offset-2 ",
+                            "ocus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none",
+                            "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                        )}
+                    >
+                        <XIcon />
+                        <span className="sr-only">Close</span>
+                    </DialogPrimitive.Close>
+                )}
+            </DialogPrimitive.Content>
+        </DialogPortal>
+    );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="dialog-header"
+            className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+            {...props}
+        />
+    );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="dialog-footer"
+            className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+            {...props}
+        />
+    );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+    return (
+        <DialogPrimitive.Title
+            data-slot="dialog-title"
+            className={cn("text-lg leading-none font-semibold", className)}
+            {...props}
+        />
+    );
+}
+
+function DialogDescription({
+    className,
+    ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+    return (
+        <DialogPrimitive.Description
+            data-slot="dialog-description"
+            className={cn("text-muted-foreground text-sm", className)}
+            {...props}
+        />
+    );
+}
+
+export {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogOverlay,
+    DialogPortal,
+    DialogTitle,
+    DialogTrigger,
+};