Dialog

1'use client';
2 
3import * as DialogPrimitive from '@radix-ui/react-dialog';
4import * as React from 'react';
5 
6import { Icon } from '@/components/ui/icon';
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-surface-primary 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 border p-6 shadow-lg duration-200 sm:max-w-lg',
64          className,
65        )}
66        {...props}>
67        {children}
68        {showCloseButton && (
69          <DialogPrimitive.Close
70            data-slot="dialog-close"
71            className="text-fg-secondary ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
72// … truncated