Dropdown Menu

1"use client";
2 
3import { Menu as DropdownMenuPrimitive } from "@base-ui/react/menu";
4import { CheckIcon, ChevronRightIcon } from "blode-icons-react";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9const DropdownMenu = ({ ...props }: DropdownMenuPrimitive.Root.Props) => (
10  <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
11);
12 
13const DropdownMenuPortal = ({ ...props }: DropdownMenuPrimitive.Portal.Props) => (
14  <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
15);
16 
17const DropdownMenuTrigger = ({
18  asChild,
19  children,
20  ...props
21}: DropdownMenuPrimitive.Trigger.Props & {
22  asChild?: boolean;
23}) => {
24  if (asChild && React.isValidElement(children)) {
25    return (
26      <DropdownMenuPrimitive.Trigger
27        data-slot="dropdown-menu-trigger"
28        render={children}
29        {...props}
30      />
31    );
32  }
33 
34  return (
35    <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props}>
36      {children}
37    </DropdownMenuPrimitive.Trigger>
38  );
39};
40 
41const DropdownMenuContent = ({
42  className,
43  align = "start",
44  alignOffset = 0,
45  side = "bottom",
46  sideOffset = 4,
47  children,
48  ...props
49}: DropdownMenuPrimitive.Popup.Props &
50  Pick<
51    DropdownMenuPrimitive.Positioner.Props,
52    "align" | "alignOffset" | "side" | "sideOffset"
53  >) => (
54  <DropdownMenuPrimitive.Portal>
55    <DropdownMenuPrimitive.Positioner
56      align={align}
57      alignOffset={alignOffset}
58      className="isolate z-50 outline-none"
59      side={side}
60      sideOffset={sideOffset}
61    >
62      <DropdownMenuPrimitive.Popup
63        className={cn(
64          "data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-soft outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
65          className,
66        )}
67        data-slot="dropdown-menu-content"
68        {...props}
69      >
70        <div className="scroll-fade max-h-(--available-height) overflow-x-hidden overflow-y-auto p-1">
71          {children}
72        </div>
73      </DropdownMenuPrimitive.Popup>
74// … truncated