8-bit Alert Dialog

1"use client";
2 
3import type * as React from "react";
4 
5import type * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
6import { type VariantProps, cva } from "class-variance-authority";
7 
8import { cn } from "@/lib/utils";
9 
10import {
11  AlertDialog as ShadcnAlertDialog,
12  AlertDialogAction as ShadcnAlertDialogAction,
13  AlertDialogCancel as ShadcnAlertDialogCancel,
14  AlertDialogContent as ShadcnAlertDialogContent,
15  AlertDialogDescription as ShadcnAlertDialogDescription,
16  AlertDialogFooter as ShadcnAlertDialogFooter,
17  AlertDialogHeader as ShadcnAlertDialogHeader,
18  AlertDialogOverlay as ShadcnAlertDialogOverlay,
19  AlertDialogPortal as ShadcnAlertDialogPortal,
20  AlertDialogTitle as ShadcnAlertDialogTitle,
21  AlertDialogTrigger as ShadcnAlertDialogTrigger,
22} from "@/components/ui/alert-dialog";
23 
24import "@/components/ui/8bit/styles/retro.css";
25 
26export const alertDialogVariants = cva("", {
27  variants: {
28    font: {
29      normal: "",
30      retro: "retro",
31    },
32  },
33  defaultVariants: {
34    font: "retro",
35  },
36});
37 
38export interface BitAlertDialogProps
39  extends React.ComponentProps<typeof AlertDialogPrimitive.Root>,
40    VariantProps<typeof alertDialogVariants> {}
41 
42function AlertDialog({ ...props }: BitAlertDialogProps) {
43  return <ShadcnAlertDialog {...props} />;
44}
45 
46function AlertDialogTrigger({
47  className,
48  asChild = true,
49  ...props
50}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
51  return (
52    <ShadcnAlertDialogTrigger
53      className={cn(className)}
54      asChild={asChild}
55      {...props}
56    />
57  );
58}
59 
60function AlertDialogPortal({
61  ...props
62}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
63  return <ShadcnAlertDialogPortal {...props} />;
64}
65 
66function AlertDialogOverlay({
67  className,
68  ...props
69}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
70  return <ShadcnAlertDialogOverlay className={cn(className)} {...props} />;
71}
72 
73interface BitAlertDialogContentProps
74  extends React.ComponentProps<typeof AlertDialogPrimitive.Content>,
75    VariantProps<typeof alertDialogVariants> {}
76 
77function AlertDialogContent({
78  className,
79  children,
80  font,
81  ...props
82}: BitAlertDialogContentProps) {
83  return (
84    <AlertDialogPortal>
85      <AlertDialogOverlay />
86      <>
87        <ShadcnAlertDialogContent
88          className={cn(
89            "rounded-none border-y-6 border-foreground dark:border-ring",
90            font !== "normal" && "retro",
91            className
92          )}
93          {...props}
94        >
95// … truncated