## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/item-detail-modal.json ``` ## Usage ```tsx import ItemDetailModal from "@/components/ui/modals/item-detail-modal" import type { MenuItem } from "@/types/restaurant" export function ItemDetailExample() { const [isOpen, setIsOpen] = useState(false) const [selectedItem, setSelectedItem] = useState(null) const handleAddToCart = (item: MenuItem, quantity: number, modifiers?: any) => { console.log("Adding to cart:", { item, quantity, modifiers }) // Add item to cart logic } return ( setIsOpen(false)} onAddToCart={handleAddToCart} item={selectedItem} /> ) } ``` ## Props | Prop | Type | Description | |------|------|-------------| | `isOpen` | `boolean` | **Required.** Whether the modal is open | | `onClose` | `() => void` | **Required.** Callback when modal is closed | | `onAddToCart` | `(item: MenuItem, quantity: number, modifiers?: any) => void` | **Required.** Callback when item is added to cart | | `item` | `MenuItem` | **Required.** The menu item to display | ## Features - **Item Image Display**: Large image with badge overlay - **Detailed Information**: Name, description, price, and ratings - **Nutritional Information**: Expandable nutrition facts - **Modifier Selection**: Customization options with price calculations - **Quantity Selection**: Adjustable quantity with bounds - **Price Calculation**: Real-time total with modifiers - **Add to Cart**: Complete order customization before adding - **Accessibility**: Full keyboard navigation and screen reader support - **Responsive Design**: Optimized for mobile and desktop ## Examples ### Basic Item Detail ```tsx const sampleItem: MenuItem = { id: "burger-001", name: "Classic Burger", description: "Juicy beef patty with lettuce, tomato, and our special sauce", price: 12.99, rating: 4.5, reviewCount: 128, imageUrl: "/images/burgers/classic-burger.jpg", imageAlt: "Classic Burger", badge: "Popular", available: true } setIsOpen(false)} onAddToCart={handleAddToCart} item={sampleItem} /> ``` ### Item with Modifiers ```tsx const itemWithModifiers: MenuItem = { id: "pizza-001", name: "Margherita Pizza", description: "Fresh mozzarella, tomato sauce, and basil", price: 16.99, imageUrl: "/images/pizzas/margherita.jpg", modifiers: [ { id: "size", name: "Size", required: true, maxSelect: 1, options: [ { id: "small", name: "Small (10\")", price: 0, default: true }, { id: "medium", name: "Medium (12\")", price: 3.00 }, { id: "large", name: "Large (14\")", price: 6.00 } ] }, { id: "toppings", name: "Extra Toppings", required: false, maxSelect: 5, options: [ { id: "pepperoni", name: "Pepperoni", price: 2.50 }, { id: "mushrooms", name: "Mushrooms", price: 1.50 }, { id: "olives", name: "Olives", price: 1.50 }, { id: "peppers", name: "Bell Peppers", price: 1.50 } ] } ] } setIsOpen(false)} onAddToCart={handleAddToCart} item={itemWithModifiers} /> ``` ### Item with Nutritional Information ```tsx const healthyItem: MenuItem = { id: "salad-001", name: "Caesar Salad", description: "Crisp romaine lettuce with parmesan and croutons", price: 11.99, nutritionalInfo: { calories: 320, protein: 12, carbs: 15, fat: 18, fiber: 4, sugar: 3 } } setIsOpen(false)} onAddToCart={handleAddToCart} item={healthyItem} /> ``` ## Integration Examples ### With Menu Item Card ```tsx export function MenuItemWithDetail() { const [selectedItem, setSelectedItem] = useState(null) const [showDetail, setShowDetail] = useState(false) const handleItemClick = (item: MenuItem) => { setSelectedItem(item) setShowDetail(true) } const handleAddToCart = (item: MenuItem, quantity: number, modifiers?: any) => { // Add to cart logic addToCart({ ...item, quantity, modifiers }) setShowDetail(false) } return ( <> handleItemClick(menuItem)} /> {selectedItem && ( setShowDetail(false)} onAddToCart={handleAddToCart} item={selectedItem} /> )} ) } ``` ### With Cart Context ```tsx import { useCart } from "@/hooks/use-cart" export function ItemDetailWithCart() { const { addItem } = useCart() const [isOpen, setIsOpen] = useState(false) const handleAddToCart = (item: MenuItem, quantity: number, modifiers?: any) => { const cartItem = { id: item.id, name: item.name, price: item.price, quantity, modifiers, image: item.imageUrl } addItem(cartItem) setIsOpen(false) // Show success notification toast.success(`${item.name} added to cart`) } return ( setIsOpen(false)} onAddToCart={handleAddToCart} item={item} /> ) } ``` ### Price Calculation Logic ```tsx const calculateItemPrice = (item: MenuItem, quantity: number, modifiers: Record) => { let basePrice = item.price * quantity let modifierPrice = 0 if (item.modifiers) { Object.entries(modifiers).forEach(([groupId, optionIds]) => { const group = item.modifiers?.find(g => g.id === groupId) if (group) { optionIds.forEach(optionId => { const option = group.options.find(o => o.id === optionId) if (option?.price) { modifierPrice += option.price * quantity } }) } }) } return basePrice + modifierPrice } ``` ## Modal State Management ### With URL State ```tsx import { useRouter, useSearchParams } from "next/navigation" export function ItemDetailWithURL() { const router = useRouter() const searchParams = useSearchParams() const itemId = searchParams.get("item") const isOpen = !!itemId const item = items.find(i => i.id === itemId) const handleClose = () => { router.push(window.location.pathname) } return ( ) } ``` ### With Local Storage ```tsx export function ItemDetailWithPersistence() { const [modifiers, setModifiers] = useState(() => { if (typeof window !== "undefined") { const saved = localStorage.getItem(`modifiers-${item.id}`) return saved ? JSON.parse(saved) : {} } return {} }) const handleModifierChange = (groupId: string, selectedIds: string[]) => { const newModifiers = { ...modifiers, [groupId]: selectedIds } setModifiers(newModifiers) localStorage.setItem(`modifiers-${item.id}`, JSON.stringify(newModifiers)) } return ( ) } ``` ## Validation and Error Handling ### Required Modifier Validation ```tsx const handleAddToCart = (item: MenuItem, quantity: number, modifiers?: any) => { // Validate required modifiers const missingRequired = item.modifiers?.filter(group => group.required && (!modifiers[group.id] || modifiers[group.id].length === 0) ) if (missingRequired?.length > 0) { toast.error(`Please select: ${missingRequired.map(g => g.name).join(", ")}`) return } // Add to cart addToCart({ item, quantity, modifiers }) } ``` ### Stock Availability ```tsx const handleAddToCart = (item: MenuItem, quantity: number, modifiers?: any) => { if (!item.available) { toast.error("This item is currently unavailable") return } if (quantity > item.maxQuantity) { toast.error(`Maximum quantity is ${item.maxQuantity}`) return } addToCart({ item, quantity, modifiers }) } ``` ## Accessibility - **ARIA Labels**: Proper labeling for screen readers - **Keyboard Navigation**: Full keyboard support with tab order - **Focus Management**: Proper focus handling when opening/closing - **Role Attributes**: Dialog role for modal semantics - **Escape Key**: ESC key closes modal - **Form Labels**: All form controls properly labeled ## Styling The modal uses theme-aware styling that adapts to light/dark modes: - Background: `bg-background` - Text: `text-foreground` and `text-muted-foreground` - Borders: Theme-aware border colors - Interactive elements: Proper hover and focus states ## Related Components - [Menu Item Card](/docs/components/menu/menu-item-card) - Menu item display cards - [Modifier Selector](/docs/components/menu/modifier-selector) - Item customization - [Quantity Selector](/docs/components/cart/quantity-selector) - Quantity selection - [Nutritional Info Modal](/docs/components/menu/nutritional-info-modal) - Standalone nutrition display

Item Detail Modal