Dialog

1"use client"
2 
3import * as React from "react"
4import * as DialogPrimitive from "@radix-ui/react-dialog"
5import { XIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function Dialog({
10  ...props
11}: React.ComponentProps<typeof DialogPrimitive.Root>) {
12  return <DialogPrimitive.Root data-slot="dialog" {...props} />
13}
14 
15function DialogTrigger({
16  ...props
17}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
18  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
19}
20 
21function DialogPortal({
22  ...props
23}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
24  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
25}
26 
27function DialogClose({
28  ...props
29}: React.ComponentProps<typeof DialogPrimitive.Close>) {
30  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
31}
32 
33function DialogOverlay({
34  className,
35  ...props
36}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
37  return (
38    <DialogPrimitive.Overlay
39      data-slot="dialog-overlay"
40      className={cn(
41        "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",
42        className
43      )}
44      {...props}
45    />
46  )
47}
48 
49function DialogContent({
50  className,
51  children,
52  showCloseButton = true,
53  dismissible = true,
54  onInteractOutside,
55  onEscapeKeyDown,
56  ...props
57}: React.ComponentProps<typeof DialogPrimitive.Content> & {
58  showCloseButton?: boolean
59  dismissible?: boolean
60}) {
61  return (
62    <DialogPortal data-slot="dialog-portal">
63      <DialogOverlay />
64      <DialogPrimitive.Content
65        data-slot="dialog-content"
66        className={cn(
67          "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 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
68          className
69        )}
70        onInteractOutside={(event) => {
71          if (!dismissible) {
72            event.preventDefault()
73          }
74          onInteractOutside?.(event)
75        }}
76        onEscapeKeyDown={(event) => {
77          if (!dismissible) {
78            event.preventDefault()
79          }
80          onEscapeKeyDown?.(event)
81        }}
82        {...props}
83      >
84        {children}
85// … truncated