| 41 | } |
| 42 | |
| 43 | function DialogContent({ |
| 44 | className, |
| 45 | children, |
| 46 | showCloseButton = true, |
| 47 | ...props |
| 48 | }: DialogPrimitive.Popup.Props & { |
| 49 | showCloseButton?: boolean; |
| 50 | }) { |
| 51 | return ( |
| 52 | <DialogPortal> |
| 53 | <DialogOverlay /> |
| 54 | <DialogPrimitive.Popup |
| 55 | data-slot="dialog-content" |
| 56 | className={cn( |
| 57 | "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none", |
| 58 | className |
| 59 | )} |
| 60 | {...props} |
| 61 | > |
| 62 | {children} |
| 63 | {showCloseButton && ( |
| 64 | <DialogPrimitive.Close |
| 65 | data-slot="dialog-close" |
| 66 | render={ |
| 67 | <Button |
| 68 | variant="ghost" |
| 69 | className="absolute top-2 right-2" |
| 70 | size="icon-sm" |
| 71 | /> |
| 72 | } |
| 73 | > |
| 74 | <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} /> |
| 75 | <span className="sr-only">Close</span> |
| 76 | </DialogPrimitive.Close> |
| 77 | )} |
| 78 | </DialogPrimitive.Popup> |
| 79 | </DialogPortal> |
| 80 | ); |
| 81 | } |
| 82 | |
| 83 | function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { |
| 84 | return ( |