1'use client';
2
3import * as React from 'react';
4import { XMarkIcon } from '@heroicons/react/16/solid';
5import * as DialogPrimitive from '@radix-ui/react-dialog';
6
7import { classNames } from '../../lib/utils';
8
9const Dialog = DialogPrimitive.Root;
10
11const DialogTrigger = DialogPrimitive.Trigger;
12
13const DialogPortal = DialogPrimitive.Portal;
14
15const DialogClose = DialogPrimitive.Close;
16
17const DialogOverlay = React.forwardRef<
18  React.ElementRef<typeof DialogPrimitive.Overlay>,
19  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
20>(({ className, ...props }, ref) => (
21  <DialogPrimitive.Overlay
22    ref={ref}
23    className={classNames(
24      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
25      className
26    )}
27    {...props}
28  />
29));
30DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
31
32const DialogContent = React.forwardRef<
33  React.ElementRef<typeof DialogPrimitive.Content>,
34  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
35>(({ className, children, ...props }, ref) => (
36  <DialogPortal>
37    <DialogOverlay />
38    <DialogPrimitive.Content
39      ref={ref}
40      className={classNames(
41        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
42        className
43      )}
44      {...props}
45    >
46      {children}
47      <DialogPrimitive.Close className='absolute right-2 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
48        <XMarkIcon className='h-5 w-5' />
49        <span className='sr-only'>Close</span>
50      </DialogPrimitive.Close>
51    </DialogPrimitive.Content>
52  </DialogPortal>
53));
54DialogContent.displayName = DialogPrimitive.Content.displayName;
55
56const DialogHeader = ({
57  className,
58  ...props
59}: React.HTMLAttributes<HTMLDivElement>) => (
60  <div
61    className={classNames(
62      'flex flex-col space-y-1.5 text-center sm:text-left',
63      className
64    )}
65    {...props}
66  />
67);
68DialogHeader.displayName = 'DialogHeader';
69
70const DialogFooter = ({
71  className,
72  ...props
73}: React.HTMLAttributes<HTMLDivElement>) => (
74  <div
75    className={classNames(
76      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
77      className
78    )}
79    {...props}
80  />
81);
82DialogFooter.displayName = 'DialogFooter';
83
84const DialogTitle = React.forwardRef<
85  React.ElementRef<typeof DialogPrimitive.Title>,
86  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
87>(({ className, ...props }, ref) => (
88  <DialogPrimitive.Title
89    ref={ref}
90    className={classNames(
91      'text-lg font-semibold leading-none tracking-tight',
92      className
93    )}
94    {...props}
95  />
96));
97DialogTitle.displayName = DialogPrimitive.Title.displayName;
98
99const DialogDescription = React.forwardRef<
100  React.ElementRef<typeof DialogPrimitive.Description>,
101  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102>(({ className, ...props }, ref) => (
103  <DialogPrimitive.Description
104    ref={ref}
105    className={classNames('text-sm text-muted-foreground', className)}
106    {...props}
107  />
108));
109DialogDescription.displayName = DialogPrimitive.Description.displayName;
110
111export {
112  Dialog,
113  DialogPortal,
114  DialogOverlay,
115  DialogClose,
116  DialogTrigger,
117  DialogContent,
118  DialogHeader,
119  DialogFooter,
120  DialogTitle,
121  DialogDescription,
122};
123

1'use client';
2
3import * as React from 'react';
4import { XMarkIcon } from '@heroicons/react/16/solid';
5import * as DialogPrimitive from '@radix-ui/react-dialog';
6
7import { classNames } from '../../lib/utils';
8
9const Dialog = DialogPrimitive.Root;
10
11const DialogTrigger = DialogPrimitive.Trigger;
12
13const DialogPortal = DialogPrimitive.Portal;
14
15const DialogClose = DialogPrimitive.Close;
16
17const DialogOverlay = React.forwardRef<
18  React.ElementRef<typeof DialogPrimitive.Overlay>,
19  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
20>(({ className, ...props }, ref) => (
21  <DialogPrimitive.Overlay
22    ref={ref}
23    className={classNames(
24      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
25      className
26    )}
27    {...props}
28  />
29));
30DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
31
32const DialogContent = React.forwardRef<
33  React.ElementRef<typeof DialogPrimitive.Content>,
34  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
35>(({ className, children, ...props }, ref) => (
36  <DialogPortal>
37    <DialogOverlay />
38    <DialogPrimitive.Content
39      ref={ref}
40      className={classNames(
41        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
42        className
43      )}
44      {...props}
45    >
46      {children}
47      <DialogPrimitive.Close className='absolute right-2 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
48        <XMarkIcon className='h-5 w-5' />
49        <span className='sr-only'>Close</span>
50      </DialogPrimitive.Close>
51    </DialogPrimitive.Content>
52  </DialogPortal>
53));
54DialogContent.displayName = DialogPrimitive.Content.displayName;
55
56const DialogHeader = ({
57  className,
58  ...props
59}: React.HTMLAttributes<HTMLDivElement>) => (
60  <div
61    className={classNames(
62      'flex flex-col space-y-1.5 text-center sm:text-left',
63      className
64    )}
65    {...props}
66  />
67);
68DialogHeader.displayName = 'DialogHeader';
69
70const DialogFooter = ({
71  className,
72  ...props
73}: React.HTMLAttributes<HTMLDivElement>) => (
74  <div
75    className={classNames(
76      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
77      className
78    )}
79    {...props}
80  />
81);
82DialogFooter.displayName = 'DialogFooter';
83
84const DialogTitle = React.forwardRef<
85  React.ElementRef<typeof DialogPrimitive.Title>,
86  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
87>(({ className, ...props }, ref) => (
88  <DialogPrimitive.Title
89    ref={ref}
90    className={classNames(
91      'text-lg font-semibold leading-none tracking-tight',
92      className
93    )}
94    {...props}
95  />
96));
97DialogTitle.displayName = DialogPrimitive.Title.displayName;
98
99const DialogDescription = React.forwardRef<
100  React.ElementRef<typeof DialogPrimitive.Description>,
101  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102>(({ className, ...props }, ref) => (
103  <DialogPrimitive.Description
104    ref={ref}
105    className={classNames('text-sm text-muted-foreground', className)}
106    {...props}
107  />
108));
109DialogDescription.displayName = DialogPrimitive.Description.displayName;
110
111export {
112  Dialog,
113  DialogPortal,
114  DialogOverlay,
115  DialogClose,
116  DialogTrigger,
117  DialogContent,
118  DialogHeader,
119  DialogFooter,
120  DialogTitle,
121  DialogDescription,
122};
123