Dialog

1"use client"
2 
3import * as React from "react"
4import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8import { XIcon } from "lucide-react"
9 
10function Dialog({ ...props }: DialogPrimitive.Root.Props) {
11  return <DialogPrimitive.Root data-slot="dialog" {...props} />
12}
13 
14function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
15  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
16}
17 
18function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
19  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
20}
21 
22function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
23  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
24}
25 
26function DialogOverlay({
27  className,
28  ...props
29}: DialogPrimitive.Backdrop.Props) {
30  return (
31    <DialogPrimitive.Backdrop
32      data-slot="dialog-overlay"
33      className={cn(
34        "fixed inset-0 isolate z-50 bg-scrim duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
35        className
36      )}
37      {...props}
38    />
39  )
40}
41 
42function DialogContent({
43  className,
44  children,
45  showCloseButton = true,
46  ...props
47}: DialogPrimitive.Popup.Props & {
48  showCloseButton?: boolean
49}) {
50  return (
51    <DialogPortal>
52      <DialogOverlay />
53      <DialogPrimitive.Popup
54        data-slot="dialog-content"
55        className={cn(
56          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
57          className
58        )}
59        {...props}
60      >
61        {children}
62        {showCloseButton && (
63          <DialogPrimitive.Close
64            data-slot="dialog-close"
65            render={
66              <Button
67                variant="ghost"
68                className="absolute top-2 right-2"
69                size="icon-sm"
70              />
71            }
72          >
73            <XIcon
74            />
75            <span className="sr-only">Close</span>
76          </DialogPrimitive.Close>
77        )}
78      </DialogPrimitive.Popup>
79    </DialogPortal>
80  )
81}
82 
83// … truncated