Public Access
107 lines
2.5 KiB
React
107 lines
2.5 KiB
React
import * as React from "react"
|
|
import { XIcon } from "lucide-react"
|
|
import { Dialog as DialogPrimitive } from "radix-ui"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
function Dialog({
|
|
...props
|
|
}) {
|
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
|
}
|
|
|
|
function DialogTrigger({
|
|
...props
|
|
}) {
|
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
|
}
|
|
|
|
function DialogClose({
|
|
...props
|
|
}) {
|
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
|
}
|
|
|
|
function DialogContent({
|
|
className,
|
|
children,
|
|
...props
|
|
}) {
|
|
return (
|
|
<DialogPrimitive.Portal>
|
|
<DialogPrimitive.Overlay
|
|
data-slot="dialog-overlay"
|
|
className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
|
|
/>
|
|
<DialogPrimitive.Content
|
|
data-slot="dialog-content"
|
|
className={cn(
|
|
"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 sm:max-w-lg",
|
|
className
|
|
)}
|
|
{...props}>
|
|
{children}
|
|
<DialogPrimitive.Close
|
|
className="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
|
|
<XIcon className="size-4" />
|
|
<span className="sr-only">Close</span>
|
|
</DialogPrimitive.Close>
|
|
</DialogPrimitive.Content>
|
|
</DialogPrimitive.Portal>
|
|
)
|
|
}
|
|
|
|
function DialogHeader({
|
|
className,
|
|
...props
|
|
}) {
|
|
return <div data-slot="dialog-header" className={cn("flex flex-col gap-2 text-left", className)} {...props} />
|
|
}
|
|
|
|
function DialogFooter({
|
|
className,
|
|
...props
|
|
}) {
|
|
return (
|
|
<div
|
|
data-slot="dialog-footer"
|
|
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
|
|
{...props} />
|
|
)
|
|
}
|
|
|
|
function DialogTitle({
|
|
className,
|
|
...props
|
|
}) {
|
|
return (
|
|
<DialogPrimitive.Title
|
|
data-slot="dialog-title"
|
|
className={cn("text-lg leading-none font-semibold", className)}
|
|
{...props} />
|
|
)
|
|
}
|
|
|
|
function DialogDescription({
|
|
className,
|
|
...props
|
|
}) {
|
|
return (
|
|
<DialogPrimitive.Description
|
|
data-slot="dialog-description"
|
|
className={cn("text-sm text-muted-foreground", className)}
|
|
{...props} />
|
|
)
|
|
}
|
|
|
|
export {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
}
|