DesktopMenu.tsx raw

   1  import {
   2    DropdownMenu,
   3    DropdownMenuContent,
   4    DropdownMenuItem,
   5    DropdownMenuSeparator,
   6    DropdownMenuSub,
   7    DropdownMenuSubContent,
   8    DropdownMenuSubTrigger,
   9    DropdownMenuTrigger
  10  } from '@/components/ui/dropdown-menu'
  11  import { cn } from '@/lib/utils'
  12  import { MenuAction } from './useMenuActions'
  13  
  14  interface DesktopMenuProps {
  15    menuActions: MenuAction[]
  16    trigger: React.ReactNode
  17  }
  18  
  19  export function DesktopMenu({ menuActions, trigger }: DesktopMenuProps) {
  20    return (
  21      <DropdownMenu>
  22        <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
  23        <DropdownMenuContent className="max-h-[50vh] overflow-y-auto">
  24          {menuActions.map((action, index) => {
  25            const Icon = action.icon
  26            return (
  27              <div key={index}>
  28                {action.separator && index > 0 && <DropdownMenuSeparator />}
  29                {action.subMenu ? (
  30                  <DropdownMenuSub>
  31                    <DropdownMenuSubTrigger className={action.className}>
  32                      <Icon />
  33                      {action.label}
  34                    </DropdownMenuSubTrigger>
  35                    <DropdownMenuSubContent
  36                      className="max-h-[50vh] overflow-y-auto"
  37                      showScrollButtons
  38                    >
  39                      {action.subMenu.map((subAction, subIndex) => (
  40                        <div key={subIndex}>
  41                          {subAction.separator && subIndex > 0 && <DropdownMenuSeparator />}
  42                          <DropdownMenuItem
  43                            onClick={subAction.onClick}
  44                            className={cn('w-64', subAction.className)}
  45                          >
  46                            {subAction.label}
  47                          </DropdownMenuItem>
  48                        </div>
  49                      ))}
  50                    </DropdownMenuSubContent>
  51                  </DropdownMenuSub>
  52                ) : (
  53                  <DropdownMenuItem onClick={action.onClick} className={action.className}>
  54                    <Icon />
  55                    {action.label}
  56                  </DropdownMenuItem>
  57                )}
  58              </div>
  59            )
  60          })}
  61        </DropdownMenuContent>
  62      </DropdownMenu>
  63    )
  64  }
  65