Pixelact Dialog

1import * as React from "react";
2import { cn } from "@/lib/utils";
3import * as DialogPrimitive from "@radix-ui/react-dialog";
4import {
5  Dialog as ShadcnDialog,
6  DialogContent as ShadcnDialogContent,
7  DialogTrigger,
8  DialogPortal,
9  DialogOverlay,
10  DialogTitle as ShadcnDialogTitle,
11  DialogDescription,
12  DialogHeader,
13  DialogFooter,
14} from "@/components/ui/dialog";
15import "@/components/ui/pixelact-ui/styles/styles.css";
16export interface PixelDialogContentProps
17  extends React.ComponentProps<typeof ShadcnDialogContent> {
18  trigger?: React.ReactNode;
19}
20 
21const Dialog = ({ ...props }: React.ComponentProps<typeof ShadcnDialog>) => {
22  return <ShadcnDialog {...props} />;
23};
24 
25const DialogTitle = React.forwardRef<
26  React.ComponentRef<typeof ShadcnDialogTitle>,
27  React.ComponentPropsWithoutRef<typeof ShadcnDialogTitle>
28>(({ className, ...props }, ref) => {
29  return (
30    <ShadcnDialogTitle
31      className={cn("pixel-font text-foreground", className)}
32      ref={ref}
33      {...props}
34    />
35  );
36});
37 
38const DialogContent = React.forwardRef<
39  React.ComponentRef<typeof DialogPrimitive.Content>,
40  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
41>(({ className, children, ...props }, ref) => (
42  <DialogPortal>
43    <DialogOverlay />
44    <DialogPrimitive.Content
45      ref={ref}
46      className={cn(
47        "fixed pixel-font rounded-none shadow-(--pixel-box-shadow) box-shadow-margin bg-background left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6  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",
48        className
49      )}
50      {...props}
51    >
52      {children}
53      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
54        <svg
55          xmlns="http://www.w3.org/2000/svg"
56          width="32"
57          height="32"
58          viewBox="0 0 24 24"
59          className="cursor-pointer"
60        >
61          <path
62            className="fill-foreground"
63            d="M5 5h2v2H5zm4 4H7V7h2zm2 2H9V9h2zm2 0h-2v2H9v2H7v2H5v2h2v-2h2v-2h2v-2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm2-2v2h-2V9zm2-2v2h-2V7zm0 0V5h2v2z"
64          />
65        </svg>
66// … truncated