Dialog

1"use client"
2 
3import * as React from "react"
4import * as DialogPrimitive from "@radix-ui/react-dialog"
5 
6import { cn } from "@/lib/utils"
7 
8function Dialog({
9  ...props
10}: React.ComponentProps<typeof DialogPrimitive.Root>) {
11  return <DialogPrimitive.Root data-slot="dialog" {...props} />
12}
13 
14function DialogTrigger({
15  ...props
16}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
17  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
18}
19 
20function DialogPortal({
21  ...props
22}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
23  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
24}
25 
26function DialogClose({
27  ...props
28}: React.ComponentProps<typeof DialogPrimitive.Close>) {
29  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
30}
31 
32function DialogOverlay({
33  className,
34  ...props
35}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
36  return (
37    <DialogPrimitive.Overlay
38      data-slot="dialog-overlay"
39      className={cn(
40        "fixed inset-0 z-50 bg-[rgba(30,38,50,0.35)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
41        className
42      )}
43      {...props}
44    />
45  )
46}
47 
48function DialogContent({
49  className,
50  children,
51  ...props
52}: React.ComponentProps<typeof DialogPrimitive.Content>) {
53  return (
54    <DialogPortal>
55      <DialogOverlay />
56      <DialogPrimitive.Content
57        data-slot="dialog-content"
58        className={cn(
59          "fixed left-1/2 top-1/2 z-50 flex w-[min(480px,calc(100%-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-xl bg-[linear-gradient(180deg,#fbfbfc_0%,#eceef2_100%)] p-7 shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_0_0_1px_rgba(20,30,50,0.2),0_26px_60px_rgba(20,30,50,0.35),0_5px_14px_rgba(20,30,50,0.18)] outline-none duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
60          className
61        )}
62        {...props}
63      >
64        {children}
65      </DialogPrimitive.Content>
66    </DialogPortal>
67  )
68}
69 
70function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
71  return (
72    <div
73      data-slot="dialog-header"
74      className={cn("flex flex-col gap-1.5", className)}
75      {...props}
76    />
77  )
78}
79 
80function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
81  return (
82    <div
83// … truncated