Dropdown Menu

1"use client"
2 
3import * as React from "react"
4import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
5import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function DropdownMenu({
10  ...props
11}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
12  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
13}
14 
15function DropdownMenuTrigger({
16  ...props
17}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
18  return (
19    <DropdownMenuPrimitive.Trigger
20      data-slot="dropdown-menu-trigger"
21      {...props}
22    />
23  )
24}
25 
26function DropdownMenuGroup({
27  ...props
28}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
29  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
30}
31 
32function DropdownMenuContent({
33  className,
34  sideOffset = 4,
35  ...props
36}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
37  return (
38    <DropdownMenuPrimitive.Portal>
39      <DropdownMenuPrimitive.Content
40        data-slot="dropdown-menu-content"
41        sideOffset={sideOffset}
42        className={cn(
43          "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[10rem] overflow-y-auto overflow-x-hidden rounded-lg border border-[#9599a1] bg-white py-1 shadow-[0_1px_0_rgba(255,255,255,0.9)_inset,0_10px_28px_rgba(20,30,50,0.3),0_2px_6px_rgba(20,30,50,0.15)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
44          className
45        )}
46        {...props}
47      />
48    </DropdownMenuPrimitive.Portal>
49  )
50}
51 
52const menuItemClass =
53  "relative flex cursor-default select-none items-center gap-2 py-1 pl-7 pr-3 text-[13px] text-[#33383f] outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-[linear-gradient(180deg,var(--aqua-gel-hi,#7db9f5)_0%,var(--aqua-gel-mid,#3c86e4)_50%,var(--aqua-gel-deep,#2668c4)_51%,var(--aqua-gel-light,#5da3ef)_100%)] data-[highlighted]:text-white data-[highlighted]:[text-shadow:0_-1px_1px_rgba(10,40,90,0.4)]"
54 
55function DropdownMenuItem({
56  className,
57  variant = "default",
58  ...props
59}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
60  variant?: "default" | "destructive"
61}) {
62  return (
63    <DropdownMenuPrimitive.Item
64      data-slot="dropdown-menu-item"
65      data-variant={variant}
66      className={cn(
67        menuItemClass,
68        variant === "destructive" &&
69// … truncated