MenuSwitcher

A dropdown selector that allows customers to switch between multiple menus (e.g., Breakfast, Lunch, Dinner). Displays availability status based on operating hours.

Preview

Import

import { MenuSwitcher } from '@/components/MenuSwitcher'

Usage

<MenuSwitcher
  menus={location.menus}
  activeMenuId={activeMenu.id}
  onMenuChange={(menuId) => setActiveMenu(menuId)}
/>

Props

menus

Menu[]

required

Array of available menus for the location.

The ID of the currently selected menu.

Callback fired when a different menu is selected.

Behavior

Shows “Available now” or “Available at 11:00 AM” based on daypart logic
Grays out menus outside their operating hours
Auto-selects the first available menu on mount

​MenuSwitcher

​Preview

​Import

​Usage

​Props

​Behavior