Skip to main content

​
Item

A versatile product card component that displays a menu item with image, name, description, price, and a quick-add button. Supports both vertical (grid) and horizontal (list) layouts.

​
Preview

View in Storybook

​
Import

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

​
Usage

{/* Vertical layout for grid view */}
<Item product={product} layout="vertical" onAdd={handleAdd} />

{/* Horizontal layout for list view */}
<Item product={product} layout="horizontal" onAdd={handleAdd} />

​
Props

​
product
Product
required
The product object containing name, description, price, images, and modifier groups.
​
layout
'vertical' | 'horizontal'
default:"vertical"
Controls the card layout direction.
​
onAdd
(product: Product) => void
required
Callback fired when the add button is clicked. If the product has modifiers, this should open the ProductDescriptionScreen.

​
Behavior

  • Truncates long descriptions with ellipsis
  • Shows product image with fallback placeholder
  • Quick-add button bypasses modifier screen when no modifiers exist
  • Displays “From $X.XX” when modifier groups affect pricing