Skip to main content

​
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

View in Storybook (Desktop & Mobile)

​
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.
​
activeMenuId
string
required
The ID of the currently selected menu.
​
onMenuChange
(menuId: string) => void
required
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