dialog

1"use client"
2
3import * as React from "react"
4import { Dialog as BaseDialog } from "@base-ui/react/dialog"
5import { X } from "lucide-react"
6import { cn } from "@/lib/utils"
7
8const Dialog = BaseDialog.Root
9
10const DialogTrigger = BaseDialog.Trigger
11
12const DialogPortal = BaseDialog.Portal
13
14const DialogClose = BaseDialog.Close
15
16type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>
17
18const DialogOverlay = React.forwardRef<
19    React.ComponentRef<typeof BaseDialog.Backdrop>,
20    DialogOverlayProps
21>(({ className, ...props }, ref) => (
22    <BaseDialog.Backdrop
23        ref={ref}
24        className={cn(
25            "fixed inset-0 z-50 bg-black opacity-80 transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0",
26            className
27        )}
28        {...props}
29    />
30))
31DialogOverlay.displayName = "DialogOverlay"
32
33type DialogContentProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>
34
35const DialogContent = React.forwardRef<
36    React.ComponentRef<typeof BaseDialog.Popup>,
37    DialogContentProps
38>(({ className, children, ...props }, ref) => (
39    <DialogPortal>
40        <DialogOverlay />
41        <BaseDialog.Popup
42            ref={ref}
43            className={cn(
44                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-2 border-black bg-white p-6 shadow-brutal duration-200 transition-opacity motion-reduce:transition-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 rounded-base",
45                className
46            )}
47            {...props}
48        >
49            {children}
50            <BaseDialog.Close aria-label="Close dialog" className="absolute right-4 top-4 rounded-base opacity-70 transition-opacity hover:opacity-100 focus-brutal disabled:pointer-events-none">
51                <X className="h-4 w-4" />
52                <span className="sr-only">Close</span>
53            </BaseDialog.Close>
54        </BaseDialog.Popup>
55    </DialogPortal>
56))
57DialogContent.displayName = "DialogContent"
58
59const DialogHeader = ({
60    className,
61    ...props
62}: React.HTMLAttributes<HTMLDivElement>) => (
63    <div
64        className={cn(
65            "flex flex-col space-y-1.5 text-center sm:text-left",
66            className
67        )}
68        {...props}
69    />
70)
71DialogHeader.displayName = "DialogHeader"
72
73const DialogFooter = ({
74// … truncated