dialog

1"use client";
2 
3import { XIcon } from "lucide-react";
4import { Dialog as DialogPrimitive } from "radix-ui";
5import type * as React from "react";
6import { Pane } from "@/components/ui/pane";
7import { cn } from "@/lib/utils";
8 
9function Dialog({
10  ...props
11}: React.ComponentProps<typeof DialogPrimitive.Root>) {
12  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
13}
14 
15function DialogTrigger({
16  ...props
17}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
18  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
19}
20 
21function DialogClose({
22  ...props
23}: React.ComponentProps<typeof DialogPrimitive.Close>) {
24  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
25}
26 
27function DialogOverlay({
28  className,
29  ...props
30}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
31  return (
32    <DialogPrimitive.Overlay
33      data-slot="dialog-overlay"
34      className={cn(
35        "fixed inset-0 z-50 bg-black/30 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",
36        className,
37      )}
38      {...props}
39    />
40  );
41}
42 
43function DialogContent({
44  className,
45  children,
46  showCloseButton = true,
47  ...props
48}: React.ComponentProps<typeof DialogPrimitive.Content> & {
49  showCloseButton?: boolean;
50}) {
51  return (
52    <DialogPrimitive.Portal data-slot="dialog-portal">
53      <DialogOverlay />
54      {/* centered by flexbox rather than a -50% translate: a transformed
55          ancestor is a containing block for the glass inside it, and the
56          backdrop it samples ends up offset from where the pane is drawn */}
57      <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4">
58        <DialogPrimitive.Content
59          data-slot="dialog-content"
60          className={cn(
61            "pointer-events-auto w-full max-w-lg 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",
62            className,
63          )}
64          {...props}
65        >
66          <Pane variant="regular" radius={28} className="grid gap-5 p-6">
67            {children}
68            {showCloseButton ? (
69              <Pane
70                variant="clear"
71                interactive
72                radius={999}
73// … truncated