Menubar

1"use client";
2 
3import * as React from "react";
4import * as MenubarPrimitive from "@radix-ui/react-menubar";
5import { Check, ChevronRight, Circle } from "lucide-react";
6 
7import { cn } from "@/lib/utils";
8 
9function Menubar({
10  className,
11  ...props
12}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
13  return (
14    <MenubarPrimitive.Root
15      data-slot="menubar"
16      className={cn(
17        "flex h-11 items-center gap-1 rounded-2xl border border-foreground/10 bg-background/75 p-1.5 shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_75%,transparent)]",
18        className,
19      )}
20      {...props}
21    />
22  );
23}
24 
25const MenubarMenu = MenubarPrimitive.Menu;
26const MenubarGroup = MenubarPrimitive.Group;
27const MenubarPortal = MenubarPrimitive.Portal;
28const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
29const MenubarSub = MenubarPrimitive.Sub;
30 
31function MenubarTrigger({
32  className,
33  ...props
34}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
35  return (
36    <MenubarPrimitive.Trigger
37      data-slot="menubar-trigger"
38      className={cn(
39        "flex cursor-default select-none items-center rounded-xl px-3 py-1.5 text-sm font-semibold outline-none transition-colors focus:bg-foreground/[.055] data-[state=open]:bg-primary/10 data-[state=open]:text-primary",
40        className,
41      )}
42      {...props}
43    />
44  );
45}
46 
47function MenubarContent({
48  className,
49  align = "start",
50  alignOffset = -4,
51  sideOffset = 8,
52  ...props
53}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
54  return (
55    <MenubarPortal>
56      <MenubarPrimitive.Content
57        data-slot="menubar-content"
58        align={align}
59        alignOffset={alignOffset}
60        sideOffset={sideOffset}
61        className={cn(
62          "z-50 min-w-52 overflow-hidden rounded-2xl border border-foreground/10 bg-popover/96 p-1.5 text-popover-foreground shadow-[0_24px_60px_-22px_color-mix(in_oklch,var(--foreground)_30%,transparent),inset_0_1px_0_color-mix(in_oklch,var(--background)_72%,transparent)] backdrop-blur-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
63          className,
64        )}
65        {...props}
66      />
67    </MenubarPortal>
68  );
69}
70 
71function MenubarItem({
72  className,
73  inset,
74  variant = "default",
75  ...props
76}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
77  inset?: boolean;
78  variant?: "default" | "destructive";
79}) {
80  return (
81// … truncated