menubar

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