## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/menu-item-card.json ``` ## Usage ```tsx import { MenuItemCard } from "@/components/restaurant/menu/menu-item-card"; export function MenuExample() { return ( console.log("Added to cart")} /> ); } ``` ## Variants The MenuItemCard component supports three different variants: ### Detailed (Default) The detailed variant shows all available information including image, description, metadata, and dietary information. ```tsx {}} /> ``` ### Compact The compact variant is optimized for list views with minimal height. ```tsx {}} /> ``` ### Preview The preview variant is image-focused, perfect for carousels and featured items. ```tsx ``` ## Props | Prop | Type | Default | Description | | ------------------ | -------------------------------------- | ------------ | -------------------------------- | | `className` | `string` | - | Additional CSS classes | | `variant` | `"detailed" \| "compact" \| "preview"` | `"detailed"` | Card layout variant | | `name` | `string` | - | **Required.** Item name | | `description` | `string` | - | Item description | | `price` | `number` | - | **Required.** Current price | | `originalPrice` | `number` | - | Original price (for discounts) | | `image` | `string` | - | Item image URL | | `category` | `string` | - | Item category | | `prepTime` | `number` | - | Preparation time in minutes | | `rating` | `number` | - | Average rating (1-5) | | `reviewCount` | `number` | - | Number of reviews | | `isPopular` | `boolean` | `false` | Show popular badge | | `isNew` | `boolean` | `false` | Show new badge | | `isSpicy` | `boolean` | `false` | Show spice indicator | | `spiceLevel` | `1 \| 2 \| 3` | - | Spice level (1-3) | | `dietary` | `string[]` | `[]` | Dietary restrictions/preferences | | `allergens` | `string[]` | `[]` | Allergen information | | `calories` | `number` | - | Calorie count | | `isAvailable` | `boolean` | `true` | Item availability | | `onAddToCart` | `(item: any) => void` | - | Add to cart callback | | `onFavorite` | `(item: any) => void` | - | Favorite toggle callback | | `isFavorited` | `boolean` | `false` | Favorite state | | `showNutrition` | `boolean` | `false` | Show nutritional information | | `showDetailDialog` | `boolean` | `false` | Enable detail dialog | | `badge` | `string` | - | Custom badge text | ## Examples ### With Dietary Information ```tsx {}} /> ``` ### With Allergen Warnings ```tsx {}} /> ``` ### Sold Out Item ```tsx {}} /> ``` ### With Rating and Reviews ```tsx {}} /> ``` ### With Detail Dialog ```tsx {}} /> ``` ## Accessibility The MenuItemCard component follows accessibility best practices: - Proper semantic HTML structure - Keyboard navigation support - Screen reader friendly labels - High contrast mode support - Focus management for interactive elements ## Styling The component uses Tailwind CSS classes and can be customized through: - CSS custom properties for colors - The `className` prop for additional styling - Tailwind configuration for theme customization ## Related Components - [Menu Grid](/docs/components/menu/menu-grid) - For displaying multiple menu items - [Menu Search](/docs/components/menu/menu-search) - For searching menu items - [Cart Item](/docs/components/cart/cart-item) - For items in the shopping cart

Menu Item Card