Menu Bar

1"use client"
2 
3import * as React from "react"
4import { MenuBar as BaseMenuBar, MenuBarItem as BaseMenuBarItem } from "@/components/ui/menu-bar"
5import { cn } from "@/lib/utils"
6import type { GlassCustomization } from "@/lib/glass-utils"
7import { hoverEffects, type HoverEffect } from "@/lib/hover-effects"
8 
9export interface MenuBarProps extends React.ComponentProps<typeof BaseMenuBar> {
10  effect?: HoverEffect
11  glass?: GlassCustomization
12}
13 
14/**
15 * Glass UI Menu Bar - A beautifully designed menu bar with glassy effects
16 * Built on top of the base MenuBar component with enhanced visual styling
17 */
18export const MenuBar = React.forwardRef<HTMLDivElement, MenuBarProps>(
19  ({ className, variant = "glass", effect = "none", glass, ...props }, ref) => {
20    return (
21      <BaseMenuBar
22        ref={ref}
23        variant={variant}
24        glass={glass}
25        className={cn(
26          hoverEffects({ hover: effect }),
27          className
28        )}
29        {...props}
30      />
31    )
32  }
33)
34MenuBar.displayName = "MenuBar"
35 
36export interface MenuBarItemProps extends React.ComponentProps<typeof BaseMenuBarItem> {}
37 
38export const MenuBarItem = React.forwardRef<HTMLButtonElement, MenuBarItemProps>(
39  ({ className, ...props }, ref) => {
40    return (
41      <BaseMenuBarItem
42        ref={ref}
43        className={className}
44        {...props}
45      />
46    )
47  }
48)
49MenuBarItem.displayName = "MenuBarItem"
50