Dialog

1"use client"
2
3import * as DialogPrimitive from "@radix-ui/react-dialog"
4import { X } from "lucide-react"
5
6import * as React from "react"
7
8import { cn } from "@/lib/utils"
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(
42        "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
43        className,
44      )}
45      {...props}
46    />
47  )
48}
49
50function DialogContent({
51  className,
52  children,
53  ...props
54}: React.ComponentProps<typeof DialogPrimitive.Content>) {
55  return (
56    <DialogPortal>
57      <DialogOverlay />
58      <DialogPrimitive.Content
59        data-slot="dialog-content"
60        className={cn(
61          "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-base border-2 border-border p-6 shadow-shadow duration-200 sm:max-w-lg",
62          className,
63        )}
64        {...props}
65      >
66        {children}
67        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-base opacity-100 ring-offset-white focus:outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
68          <X />
69          <span className="sr-only">Close</span>
70        </DialogPrimitive.Close>
71      </DialogPrimitive.Content>
72// … truncated