## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/nutritional-info-modal.json ``` ## Usage ```tsx import { NutritionalInfoModal } from "@/components/restaurant/menu/nutritional-info-modal"; export function MenuItemWithNutrition() { const [isOpen, setIsOpen] = useState(false); return ( <> setIsOpen(false)} itemName="Classic Burger" nutritionData={{ calories: 650, protein: 35, carbs: 45, fat: 32, sodium: 890 }} /> ); } ``` ## Features - **Complete Nutrition Facts**: Display all standard nutritional values - **Allergen Information**: Clear allergen warnings and icons - **Dietary Badges**: Vegan, vegetarian, gluten-free certifications - **Serving Size Options**: Toggle between different portion sizes - **Daily Value Percentages**: Show % DV based on 2000 calorie diet - **Ingredient Lists**: Full ingredient disclosure - **Mobile Optimized**: Responsive modal design - **Print Friendly**: Option to print nutrition facts ## Examples ### Basic Nutritional Information ```tsx ``` ### With Allergens and Dietary Info ```tsx ``` ### Multiple Serving Sizes ```tsx ``` ### With Custom Nutrients ```tsx ``` ### Comparison View ```tsx ``` ## API Reference ### NutritionalInfoModal Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `isOpen` | `boolean` | - | **Required.** Whether modal is open | | `onClose` | `() => void` | - | **Required.** Callback when modal closes | | `itemName` | `string` | - | **Required.** Name of the menu item | | `nutritionData` | `NutritionData` | - | **Required.** Nutritional information | | `allergens` | `string[]` | `[]` | List of allergens | | `dietaryInfo` | `DietaryInfo` | - | Dietary certifications | | `ingredients` | `string` | - | Full ingredient list | | `servingSizes` | `ServingSize[]` | - | Multiple serving options | | `customNutrients` | `CustomNutrient[]` | - | Additional nutrients | | `showDailyValues` | `boolean` | `true` | Show % daily values | | `comparisonMode` | `boolean` | `false` | Enable comparison view | | `printable` | `boolean` | `true` | Show print button | | `className` | `string` | - | Additional CSS classes | ### NutritionData Interface ```tsx interface NutritionData { servingSize?: string; servingsPerContainer?: number; calories: number; caloriesFromFat?: number; totalFat?: number; saturatedFat?: number; transFat?: number; polyunsaturatedFat?: number; monounsaturatedFat?: number; cholesterol?: number; sodium?: number; potassium?: number; totalCarbs?: number; dietaryFiber?: number; sugars?: number; addedSugars?: number; protein?: number; vitaminA?: number; vitaminC?: number; vitaminD?: number; calcium?: number; iron?: number; } ``` ### DietaryInfo Interface ```tsx interface DietaryInfo { vegetarian?: boolean; vegan?: boolean; glutenFree?: boolean; dairyFree?: boolean; nutFree?: boolean; kosher?: boolean; halal?: boolean; organic?: boolean; nonGMO?: boolean; } ``` ## Styling ### Custom Theme ```tsx ``` ### Compact Mode ```tsx ``` ## Accessibility - **Keyboard Navigation**: Escape key to close, Tab navigation - **Screen Reader Support**: Proper ARIA labels and live regions - **Focus Management**: Focus trap within modal - **High Contrast**: Meets WCAG contrast requirements - **Semantic HTML**: Proper heading hierarchy ## Integration Examples ### With Menu Item Card ```tsx export function MenuItemWithNutrition({ item }) { const [showNutrition, setShowNutrition] = useState(false); return ( <> setShowNutrition(true)} className="text-sm text-primary hover:underline" > Nutrition Info } /> setShowNutrition(false)} itemName={item.name} nutritionData={item.nutrition} allergens={item.allergens} dietaryInfo={item.dietary} /> ); } ``` ### With Filter System ```tsx export function NutritionFilter({ onFilterChange }) { const [selectedNutrition, setSelectedNutrition] = useState({ maxCalories: null, minProtein: null, dietaryRestrictions: [] }); return (

Max Calories { const value = parseInt(e.target.value); setSelectedNutrition(prev => ({ ...prev, maxCalories: value })); onFilterChange({ maxCalories: value }); }} />

{/* Additional filter controls */}

); } ``` ## Best Practices 1. **Data Accuracy**: Ensure nutritional data is accurate and up-to-date 2. **Legal Compliance**: Follow local regulations for nutrition disclosure 3. **Mobile First**: Design for mobile viewing comfort 4. **Loading States**: Show skeleton while fetching nutrition data 5. **Caching**: Cache nutritional data to reduce API calls 6. **Batch Updates**: Update multiple items' nutrition data together ## Performance ```tsx // Lazy load nutritional data const { data: nutritionData, isLoading } = useSWR( showNutrition ? `/api/nutrition/${itemId}` : null, fetcher ); setShowNutrition(false)} itemName={itemName} nutritionData={nutritionData} loading={isLoading} /> ``` ## Related Components - [Menu Item Card](/docs/components/menu/menu-item-card) - Display menu items - [Dietary Filter](/docs/components/menu/dietary-filter) - Filter by dietary needs - [Allergen Badge](/docs/components/common/allergen-badge) - Allergen indicators - [Health Score](/docs/components/menu/health-score) - Visual health ratings

Nutritional Info Modal