Menubar

1"use client";
2
3import { ComponentProps } from "react";
4
5import { Menu as MenuPrimitive } from "@base-ui/react/menu";
6import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
7
8import { cn } from "@/lib/utils";
9import {
10  DropdownMenu,
11  DropdownMenuContent,
12  DropdownMenuGroup,
13  DropdownMenuItem,
14  DropdownMenuLabel,
15  DropdownMenuPortal,
16  DropdownMenuRadioGroup,
17  DropdownMenuSeparator,
18  DropdownMenuShortcut,
19  DropdownMenuSub,
20  DropdownMenuSubContent,
21  DropdownMenuSubTrigger,
22  DropdownMenuTrigger
23} from "@/components/ui/dropdown-menu";
24import { CheckIcon } from "lucide-react";
25
26function Menubar({ className, ...props }: MenubarPrimitive.Props) {
27  return (
28    <MenubarPrimitive
29      data-slot="menubar"
30      className={cn(
31        "bg-background flex h-10 items-center gap-0.5 rounded-lg border border-border p-3",
32        className
33      )}
34      {...props}
35    />
36  );
37}
38
39function MenubarMenu({ ...props }: ComponentProps<typeof DropdownMenu>) {
40  return <DropdownMenu data-slot="menubar-menu" {...props} />;
41}
42
43function MenubarGroup({
44  ...props
45}: ComponentProps<typeof DropdownMenuGroup>) {
46  return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
47}
48
49function MenubarPortal({
50  ...props
51}: ComponentProps<typeof DropdownMenuPortal>) {
52  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
53}
54
55function MenubarTrigger({
56  className,
57  ...props
58}: ComponentProps<typeof DropdownMenuTrigger>) {
59  return (
60    <DropdownMenuTrigger
61      data-slot="menubar-trigger"
62      className={cn(
63        "hover:bg-background aria-expanded:bg-card aria-expanded:shadow-md flex items-center rounded-lg px-3 py-1 text-base font-medium outline-hidden select-none",
64        className
65      )}
66      {...props}
67    />
68  );
69}
70
71function MenubarContent({
72  className,
73  align = "start",
74  alignOffset = -4,
75  sideOffset = 8,
76  ...props
77}: ComponentProps<typeof DropdownMenuContent>) {
78  return (
79    <DropdownMenuContent
80      data-slot="menubar-content"
81      align={align}
82      alignOffset={alignOffset}
83      sideOffset={sideOffset}
84      className={cn(
85// … truncated