8-bit Dialog

1import { type VariantProps, cva } from "class-variance-authority";
2 
3import { cn } from "@/lib/utils";
4 
5import {
6  Dialog as ShadcnDialog,
7  DialogClose as ShadcnDialogClose,
8  DialogContent as ShadcnDialogContent,
9  DialogDescription as ShadcnDialogDescription,
10  DialogFooter as ShadcnDialogFooter,
11  DialogHeader as ShadcnDialogHeader,
12  DialogTitle as ShadcnDialogTitle,
13  DialogTrigger as ShadcnDialogTrigger,
14} from "@/components/ui/dialog";
15 
16import "@/components/ui/8bit/styles/retro.css";
17 
18const Dialog = ShadcnDialog;
19 
20const DialogTrigger = ShadcnDialogTrigger;
21 
22const DialogHeader = ShadcnDialogHeader;
23 
24const DialogDescription = ShadcnDialogDescription;
25 
26const DialogClose = ShadcnDialogClose;
27 
28const DialogFooter = ShadcnDialogFooter;
29 
30export interface BitDialogProps
31  extends React.ComponentProps<"div">,
32    VariantProps<typeof dialogContentVariants> {}
33 
34function DialogTitle({ ...props }: BitDialogProps) {
35  const { className, font } = props;
36  return (
37    <ShadcnDialogTitle
38      className={cn(font !== "normal" && "retro", className)}
39      {...props}
40    />
41  );
42}
43 
44export const dialogContentVariants = cva("", {
45  variants: {
46    font: {
47      normal: "",
48      retro: "retro",
49    },
50  },
51  defaultVariants: {
52    font: "retro",
53  },
54});
55 
56function DialogContent({
57  className,
58  children,
59  font,
60  ...props
61}: BitDialogProps) {
62  return (
63    <ShadcnDialogContent
64      className={cn(
65        "bg-card rounded-none border-none",
66        font !== "normal" && "retro",
67        className
68      )}
69      {...props}
70    >
71      {children}
72 
73      <div
74        className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
75        aria-hidden="true"
76      />
77      <div
78        className="absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none"
79        aria-hidden="true"
80      />
81    </ShadcnDialogContent>
82  );
83}
84 
85export {
86  Dialog,
87  DialogTrigger,
88  DialogHeader,
89  DialogFooter,
90  DialogDescription,
91  DialogTitle,
92  DialogContent,
93  DialogClose,
94};