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({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
9    return (
10        <DialogPrimitive.Root
11            data-slot="dialog"
12            {...props}
13        />
14    )
15}
16 
17function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
18    return (
19        <DialogPrimitive.Trigger
20            data-slot="dialog-trigger"
21            {...props}
22        />
23    )
24}
25 
26function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
27    return (
28        <DialogPrimitive.Portal
29            data-slot="dialog-portal"
30            {...props}
31        />
32    )
33}
34 
35function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
36    return (
37        <DialogPrimitive.Close
38            data-slot="dialog-close"
39            {...props}
40        />
41    )
42}
43 
44function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
45    return (
46        <DialogPrimitive.Overlay
47            data-slot="dialog-overlay"
48            className={cn('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/80', className)}
49            {...props}
50        />
51    )
52}
53 
54function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
55    return (
56        <DialogPortal data-slot="dialog-portal">
57            <DialogOverlay />
58            <DialogPrimitive.Content
59                data-slot="dialog-content"
60                className={cn('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 left-[50%] top-[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', className)}
61                {...props}>
62                {children}
63            </DialogPrimitive.Content>
64        </DialogPortal>
65    )
66}
67 
68function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
69    return (
70        <div
71            data-slot="dialog-header"
72            className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
73            {...props}
74        />
75// … truncated