Dialog

1"use client";
2 
3import * as DialogPrimitive from "@radix-ui/react-dialog";
4import { X } from "lucide-react";
5import { type ComponentPropsWithoutRef, forwardRef } from "react";
6import { cn } from "@/lib/utils";
7import { glass } from "@/lib/glass";
8 
9export const Dialog = DialogPrimitive.Root;
10export const DialogTrigger = DialogPrimitive.Trigger;
11export const DialogPortal = DialogPrimitive.Portal;
12export const DialogClose = DialogPrimitive.Close;
13 
14export const DialogOverlay = forwardRef<
15  HTMLDivElement,
16  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
17>(({ className, ...props }, ref) => (
18  <DialogPrimitive.Overlay
19    ref={ref}
20    className={cn(
21      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
22      className,
23    )}
24    {...props}
25  />
26));
27DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
28 
29export const DialogContent = forwardRef<
30  HTMLDivElement,
31  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
32>(({ className, children, ...props }, ref) => (
33  <DialogPortal>
34    <DialogOverlay />
35    <DialogPrimitive.Content
36      ref={ref}
37      className={cn(
38        glass,
39        "bg-white dark:bg-zinc-950 rounded-[32px] overflow-hidden",
40        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
41        className,
42      )}
43      {...props}
44    >
45      {children}
46      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-full p-1.5 text-current/50 transition-colors hover:bg-black/[0.05] hover:text-current focus:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-500/40 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400/50">
47        <X className="size-4" />
48        <span className="sr-only">Close</span>
49      </DialogPrimitive.Close>
50    </DialogPrimitive.Content>
51  </DialogPortal>
52));
53DialogContent.displayName = DialogPrimitive.Content.displayName;
54 
55export const DialogHeader = ({
56  className,
57  ...props
58}: React.HTMLAttributes<HTMLDivElement>) => (
59  <div
60// … truncated