openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import * as DialogPrimitive from "@radix-ui/react-dialog";
4import { XIcon } from "lucide-react";
5import type * as React from "react";
6
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 DialogPortal({
22 ...props
23}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
24 return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
25}
26
27function DialogClose({
28 ...props
29}: React.ComponentProps<typeof DialogPrimitive.Close>) {
30 return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
31}
32
33function DialogOverlay({
34 className,
35 ...props
36}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
37 return (
38 <DialogPrimitive.Overlay
39 data-slot="dialog-overlay"
40 className={cn(
41 "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in",
42 className
43 )}
44 {...props}
45 />
46 );
47}
48
49function DialogContent({
50 className,
51 children,
52 ...props
53}: React.ComponentProps<typeof DialogPrimitive.Content>) {
54 return (
55 <DialogPortal data-slot="dialog-portal">
56 <DialogOverlay />
57 <DialogPrimitive.Content
58 data-slot="dialog-content"
59 className={cn(
60 "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
61 className
62 )}
63 {...props}
64 >
65 {children}
66 <DialogPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0">
67 <XIcon />
68 <span className="sr-only">Close</span>
69 </DialogPrimitive.Close>
70 </DialogPrimitive.Content>
71 </DialogPortal>
72 );
73}
74
75function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
76 return (
77 <div
78 data-slot="dialog-header"
79 className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
80 {...props}
81 />
82 );
83}
84
85function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
86 return (
87 <div
88 data-slot="dialog-footer"
89 className={cn(
90 "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
91 className
92 )}
93 {...props}
94 />
95 );
96}
97
98function DialogTitle({
99 className,
100 ...props
101}: React.ComponentProps<typeof DialogPrimitive.Title>) {
102 return (
103 <DialogPrimitive.Title
104 data-slot="dialog-title"
105 className={cn("font-semibold text-lg leading-none", className)}
106 {...props}
107 />
108 );
109}
110
111function DialogDescription({
112 className,
113 ...props
114}: React.ComponentProps<typeof DialogPrimitive.Description>) {
115 return (
116 <DialogPrimitive.Description
117 data-slot="dialog-description"
118 className={cn("text-muted-foreground text-sm", className)}
119 {...props}
120 />
121 );
122}
123
124export {
125 Dialog,
126 DialogClose,
127 DialogContent,
128 DialogDescription,
129 DialogFooter,
130 DialogHeader,
131 DialogOverlay,
132 DialogPortal,
133 DialogTitle,
134 DialogTrigger,
135};