Dialog

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiClose } from "@mdi/js";
5import { Dialog as DialogPrimitive } from "radix-ui";
6import type * as React from "react";
7 
8import { buttonVariants } from "@/components/ui/button";
9import { cn } from "@/lib/utils";
10 
11function Dialog({
12  ...props
13}: React.ComponentProps<typeof DialogPrimitive.Root>) {
14  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
15}
16 
17function DialogTrigger({
18  ...props
19}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
20  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
21}
22 
23function DialogPortal({
24  ...props
25}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
26  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
27}
28 
29function DialogClose({
30  ...props
31}: React.ComponentProps<typeof DialogPrimitive.Close>) {
32  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
33}
34 
35function DialogOverlay({
36  className,
37  ...props
38}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
39  return (
40    <DialogPrimitive.Overlay
41      data-slot="dialog-overlay"
42      className={cn(
43        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
44        className,
45      )}
46      {...props}
47    />
48  );
49}
50 
51interface DialogContentProps
52  extends React.ComponentProps<typeof DialogPrimitive.Content> {
53  size?: "sm" | "md" | "lg" | "xl" | "full";
54}
55 
56function DialogContent({
57  className,
58  children,
59  size = "md",
60  ...props
61}: DialogContentProps) {
62  const sizeClasses: Record<NonNullable<DialogContentProps["size"]>, string> = {
63    sm: "max-w-sm",
64    md: "max-w-md",
65    lg: "max-w-2xl",
66    xl: "max-w-4xl",
67    full: "w-screen h-screen max-w-none max-h-none rounded-none p-0",
68  };
69 
70  return (
71    <DialogPortal data-slot="dialog-portal">
72      <DialogOverlay />
73      <DialogPrimitive.Content
74        data-slot="dialog-content"
75        className={cn(
76          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 shadow-lg duration-200",
77          size === "full"
78            ? sizeClasses[size]
79            : "max-w-[calc(100%-2rem)] rounded-lg px-7 py-5",
80          size !== "full" && sizeClasses[size],
81// … truncated