Dialog

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