8-bit Dropdown Menu

1import type * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
2import { type VariantProps, cva } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6import {
7  DropdownMenu as ShadcnDropdownMenu,
8  DropdownMenuCheckboxItem as ShadcnDropdownMenuCheckboxItem,
9  DropdownMenuContent as ShadcnDropdownMenuContent,
10  DropdownMenuGroup as ShadcnDropdownMenuGroup,
11  DropdownMenuItem as ShadcnDropdownMenuItem,
12  DropdownMenuLabel as ShadcnDropdownMenuLabel,
13  DropdownMenuPortal as ShadcnDropdownMenuPortal,
14  DropdownMenuSeparator as ShadcnDropdownMenuSeparator,
15  DropdownMenuShortcut as ShadcnDropdownMenuShortcut,
16  DropdownMenuSub as ShadcnDropdownMenuSub,
17  DropdownMenuSubContent as ShadcnDropdownMenuSubContent,
18  DropdownMenuSubTrigger as ShadcnDropdownMenuSubTrigger,
19  DropdownMenuTrigger as ShadcnDropdownMenuTrigger,
20} from "@/components/ui/dropdown-menu";
21 
22import "@/components/ui/8bit/styles/retro.css";
23 
24const DropdownMenu = ShadcnDropdownMenu;
25 
26const DropdownMenuPortal = ShadcnDropdownMenuPortal;
27 
28const DropdownMenuTrigger = ShadcnDropdownMenuTrigger;
29 
30const DropdownMenuGroup = ShadcnDropdownMenuGroup;
31 
32const DropdownMenuLabel = ShadcnDropdownMenuLabel;
33 
34const DropdownMenuSeparator = ShadcnDropdownMenuSeparator;
35 
36const DropdownMenuShortcut = ShadcnDropdownMenuShortcut;
37 
38const DropdownMenuSub = ShadcnDropdownMenuSub;
39 
40const DropdownMenuCheckboxItem = ShadcnDropdownMenuCheckboxItem;
41 
42function DropdownMenuSubTrigger({
43  className,
44  children,
45  ...props
46}: React.ComponentProps<typeof DropdownMenuPrimitive.DropdownMenuSubTrigger>) {
47  return (
48    <ShadcnDropdownMenuSubTrigger
49      className={cn(
50        "hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-4 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring",
51        className
52      )}
53      {...props}
54    >
55      {children}
56    </ShadcnDropdownMenuSubTrigger>
57  );
58}
59 
60function DropdownMenuItem({
61  className,
62  children,
63  ...props
64}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
65  inset?: boolean;
66  variant?: "default" | "destructive";
67}) {
68  return (
69    <ShadcnDropdownMenuItem
70      className={cn(
71// … truncated