"use client"; import * as React from "react"; import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; import { type VariantProps, cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { AlertDialog as ShadcnAlertDialog, AlertDialogAction as ShadcnAlertDialogAction, AlertDialogCancel as ShadcnAlertDialogCancel, AlertDialogContent as ShadcnAlertDialogContent, AlertDialogDescription as ShadcnAlertDialogDescription, AlertDialogFooter as ShadcnAlertDialogFooter, AlertDialogHeader as ShadcnAlertDialogHeader, AlertDialogOverlay as ShadcnAlertDialogOverlay, AlertDialogPortal as ShadcnAlertDialogPortal, AlertDialogTitle as ShadcnAlertDialogTitle, AlertDialogTrigger as ShadcnAlertDialogTrigger, } from "@/components/ui/alert-dialog"; import "./styles/retro.css"; export const alertDialogVariants = cva("", { variants: { font: { normal: "", retro: "retro", }, }, defaultVariants: { font: "retro", }, }); export interface BitAlertDialogProps extends React.ComponentProps, VariantProps {} function AlertDialog({ ...props }: BitAlertDialogProps) { return ; } function AlertDialogTrigger({ className, asChild = true, ...props }: React.ComponentProps) { return ( ); } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ; } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ; } interface BitAlertDialogContentProps extends React.ComponentProps, VariantProps {} function AlertDialogContent({ className, children, font, ...props }: BitAlertDialogContentProps) { return ( <> {children}

); } function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) { return ; } function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) { return ( ); } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ; } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ; } function AlertDialogAction({ className, ...props }: React.ComponentProps) { return ( {props.children} {/* Pixelated border */}

{/* Top shadow */}

{/* Bottom shadow */}

); } function AlertDialogCancel({ className, ...props }: React.ComponentProps) { return ( {props.children}

); } export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

Installation

Files

components

Styles