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  ...props
54}: React.ComponentProps<typeof DialogPrimitive.Content> & {
55  showCloseButton?: boolean;
56}) {
57  return (
58    <DialogPortal data-slot="dialog-portal">
59      <DialogOverlay />
60      <DialogPrimitive.Content
61        data-slot="dialog-content"
62        className={cn(
63          "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",
64          className
65        )}
66        {...props}
67      >
68        {children}
69        {showCloseButton && (
70          <DialogPrimitive.Close
71            data-slot="dialog-close"
72// … truncated