Dialog

1'use client';
2 
3import {
4  Close,
5  Content,
6  Description,
7  Overlay,
8  Portal,
9  Root,
10  Title,
11  Trigger,
12} from '@radix-ui/react-dialog';
13import { XIcon } from 'lucide-react';
14import { cn } from '@/lib/classnames';
15import type { ComponentProps } from 'react';
16 
17function DialogRoot({ ...props }: ComponentProps<typeof Root>) {
18  return <Root data-slot='dialog' {...props} />;
19}
20 
21function DialogTrigger({ ...props }: ComponentProps<typeof Trigger>) {
22  return <Trigger data-slot='dialog-trigger' {...props} />;
23}
24 
25function DialogPortal({ ...props }: ComponentProps<typeof Portal>) {
26  return <Portal data-slot='dialog-portal' {...props} />;
27}
28 
29function DialogClose({ ...props }: ComponentProps<typeof Close>) {
30  return <Close data-slot='dialog-close' {...props} />;
31}
32 
33function DialogOverlay({
34  className,
35  ...props
36}: ComponentProps<typeof Overlay>) {
37  return (
38    <Overlay
39      className={cn(
40        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in',
41        className,
42      )}
43      data-slot='dialog-overlay'
44      {...props}
45    />
46  );
47}
48 
49function DialogContent({
50  className,
51  children,
52  showCloseButton = true,
53  ...props
54}: ComponentProps<typeof Content> & {
55  showCloseButton?: boolean;
56}) {
57  return (
58    <DialogPortal data-slot='dialog-portal'>
59      <DialogOverlay />
60      <Content
61        className={cn(
62          '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 bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg',
63          className,
64        )}
65        data-slot='dialog-content'
66        {...props}
67      >
68        {children}
69        {showCloseButton && (
70          <Close
71            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden 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 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
72            data-slot='dialog-close'
73          >
74            <XIcon />
75            <span className='sr-only'>Close</span>
76          </Close>
77// … truncated