Dropdown

1"use client";
2 
3import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
4import { type ComponentPropsWithoutRef, forwardRef } from "react";
5import { cn } from "@/lib/utils";
6import { glass } from "@/lib/glass";
7import {
8  menuContentClass,
9  menuItemClass,
10  menuLabelClass,
11  menuSeparatorClass,
12} from "@/lib/menu-classes";
13 
14export const DropdownMenu = DropdownMenuPrimitive.Root;
15export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
16export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
17export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
18export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
19export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
20 
21export const DropdownMenuContent = forwardRef<
22  HTMLDivElement,
23  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
24>(({ className, sideOffset = 6, ...props }, ref) => (
25  <DropdownMenuPrimitive.Portal>
26    <DropdownMenuPrimitive.Content
27      ref={ref}
28      sideOffset={sideOffset}
29      className={cn(
30        glass,
31        menuContentClass,
32        "animate-in fade-in-0 zoom-in-95",
33        className,
34      )}
35      {...props}
36    />
37  </DropdownMenuPrimitive.Portal>
38));
39DropdownMenuContent.displayName = "DropdownMenuContent";
40 
41export const DropdownMenuItem = forwardRef<
42  HTMLDivElement,
43  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
44>(({ className, ...props }, ref) => (
45  <DropdownMenuPrimitive.Item
46    ref={ref}
47    className={cn(menuItemClass, className)}
48    {...props}
49  />
50));
51DropdownMenuItem.displayName = "DropdownMenuItem";
52 
53export const DropdownMenuLabel = forwardRef<
54  HTMLDivElement,
55  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
56>(({ className, ...props }, ref) => (
57  <DropdownMenuPrimitive.Label
58    ref={ref}
59    className={cn(menuLabelClass, className)}
60    {...props}
61  />
62));
63DropdownMenuLabel.displayName = "DropdownMenuLabel";
64 
65export const DropdownMenuSeparator = forwardRef<
66  HTMLDivElement,
67  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
68>(({ className, ...props }, ref) => (
69  <DropdownMenuPrimitive.Separator
70    ref={ref}
71    className={cn(menuSeparatorClass, className)}
72    {...props}
73  />
74));
75DropdownMenuSeparator.displayName = "DropdownMenuSeparator";