Warcraft Dropdown Menu

1"use client";
2 
3import * as React from "react";
4import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
5import { CheckIcon, ChevronRightIcon } from "lucide-react";
6 
7import { cn } from "@/lib/utils";
8 
9import "@/components/ui/warcraftcn/styles/warcraft.css";
10 
11function DropdownMenu({
12  ...props
13}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
14  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
15}
16 
17function DropdownMenuPortal({
18  ...props
19}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
20  return (
21    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
22  );
23}
24 
25function DropdownMenuTrigger({
26  ...props
27}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
28  return (
29    <DropdownMenuPrimitive.Trigger
30      data-slot="dropdown-menu-trigger"
31      {...props}
32    />
33  );
34}
35 
36function DropdownMenuContent({
37  className,
38  align = "start",
39  sideOffset = 8,
40  ...props
41}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
42  return (
43    <DropdownMenuPrimitive.Portal>
44      <DropdownMenuPrimitive.Content
45        data-slot="dropdown-menu-content"
46        sideOffset={sideOffset}
47        align={align}
48        className={cn(
49          "fantasy z-50 min-w-40 pb-4 overflow-hidden text-amber-100",
50          "border-solid wc-dropdown-border [border-image-repeat:stretch] border-12 [border-image-slice:12_fill]",
51          "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",
52          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
53          className
54        )}
55        {...props}
56      />
57    </DropdownMenuPrimitive.Portal>
58  );
59}
60 
61function DropdownMenuGroup({
62  ...props
63}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
64  return (
65    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
66  );
67}
68 
69function DropdownMenuItem({
70  className,
71  inset,
72  ...props
73}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
74  inset?: boolean;
75}) {
76  return (
77    <DropdownMenuPrimitive.Item
78      data-slot="dropdown-menu-item"
79      data-inset={inset}
80      className={cn(
81        "fantasy relative flex cursor-pointer select-none items-center gap-2 px-5 py-2 text-sm text-amber-100 outline-none transition-all",
82// … truncated