| "use client"; |
|
|
| import * as React from "react"; |
| import { Dialog as DialogPrimitive } from "radix-ui"; |
|
|
| import { cn } from "@/lib/utils"; |
| import { Button } from "@/components/ui/button"; |
| import { IconX } from "@tabler/icons-react"; |
|
|
| function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) { |
| return <DialogPrimitive.Root data-slot="dialog" {...props} />; |
| } |
|
|
| function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) { |
| return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />; |
| } |
|
|
| function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) { |
| return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />; |
| } |
|
|
| function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) { |
| return <DialogPrimitive.Close data-slot="dialog-close" {...props} />; |
| } |
|
|
| function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) { |
| return ( |
| <DialogPrimitive.Overlay |
| data-slot="dialog-overlay" |
| className={cn( |
| "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", |
| className, |
| )} |
| {...props} |
| /> |
| ); |
| } |
|
|
| function DialogContent({ |
| className, |
| children, |
| showCloseButton = true, |
| ...props |
| }: React.ComponentProps<typeof DialogPrimitive.Content> & { |
| showCloseButton?: boolean; |
| }) { |
| return ( |
| <DialogPortal> |
| <DialogOverlay /> |
| <DialogPrimitive.Content |
| data-slot="dialog-content" |
| className={cn( |
| "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-xl p-4 text-sm 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", |
| className, |
| )} |
| {...props} |
| > |
| {children} |
| {showCloseButton && ( |
| <DialogPrimitive.Close data-slot="dialog-close" asChild> |
| <Button variant="ghost" className="absolute top-2 right-2" size="icon-sm"> |
| <IconX /> |
| <span className="sr-only">Close</span> |
| </Button> |
| </DialogPrimitive.Close> |
| )} |
| </DialogPrimitive.Content> |
| </DialogPortal> |
| ); |
| } |
|
|
| function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { |
| return <div data-slot="dialog-header" className={cn("gap-2 flex flex-col", className)} {...props} />; |
| } |
|
|
| function DialogFooter({ |
| className, |
| showCloseButton = false, |
| children, |
| ...props |
| }: React.ComponentProps<"div"> & { |
| showCloseButton?: boolean; |
| }) { |
| return ( |
| <div data-slot="dialog-footer" className={cn("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props}> |
| {children} |
| {showCloseButton && ( |
| <DialogPrimitive.Close asChild> |
| <Button variant="outline">Close</Button> |
| </DialogPrimitive.Close> |
| )} |
| </div> |
| ); |
| } |
|
|
| function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) { |
| return <DialogPrimitive.Title data-slot="dialog-title" className={cn("text-sm leading-none font-medium", className)} {...props} />; |
| } |
|
|
| function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) { |
| return ( |
| <DialogPrimitive.Description |
| data-slot="dialog-description" |
| className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)} |
| {...props} |
| /> |
| ); |
| } |
|
|
| export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger }; |
|
|
