\n \n {info.label}: {formatNutrient(recipe.nutrition![expandedNutrient], info.unit)}{info.unit}/serving\n \n

\n {breakdownLoading ? (\n

\n ) : (\n

\n {getIngredientContributions(expandedNutrient).map(({ ingredient, contribution, hasData }) => (\n

\n {ingredient.name}\n \n {contribution !== null ? `${formatNutrient(contribution, info.unit)}${info.unit}` : hasData ? '-' : 'N/A'}\n \n

\n ))}\n

\n )}\n

\n );\n };\n\n // Render a clickable nutrient card\n const renderNutrientCard = (key: NutrientKey, displayLabel?: string, small = false) => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n \n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className={`${small ? 'p-1.5' : 'p-2'} rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400`}\n style={{ \n background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', \n border: '1px solid var(--border-primary)'\n }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit === 'kcal' ? '' : info.unit}\n

\n {displayLabel || info.label}\n

\n \n );\n };\n\n const macroKeys = ['calories', 'protein', 'carbs', 'fat', 'fiber'] as const;\n const fatsKeys = ['saturatedFat', 'transFat', 'monounsaturatedFat', 'polyunsaturatedFat', 'cholesterol'] as const;\n const sugarsKeys = ['sugars', 'addedSugars', 'starch'] as const;\n const mineralsKeys = ['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese'] as const;\n const vitFatKeys = ['vitaminA', 'vitaminD', 'vitaminE', 'vitaminK', 'retinol'] as const;\n const vitWater1Keys = ['vitaminC', 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin'] as const;\n const vitWater2Keys = ['pantothenicAcid', 'biotin', 'folate', 'folicAcid', 'choline', 'betaine'] as const;\n const carotenoidKeys = ['betaCarotene', 'alphaCarotene', 'lycopene', 'luteinZeaxanthin'] as const;\n const otherKeys = ['water', 'alcohol', 'caffeine'] as const;\n\n return (\n

Nutrition (per serving)

\n setShowMicronutrients(!showMicronutrients)}\n className=\"text-xs hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n {showMicronutrients ? 'Hide details' : 'Show vitamins & minerals'}\n \n

\n \n {/* Macros */}\n

\n {macroKeys.map(key => renderNutrientCard(key, key === 'calories' ? 'kcal' : key))}\n

\n {renderBreakdown(macroKeys)}\n \n {/* Micronutrients */}\n {showMicronutrients && (\n

\n {/* Fats Breakdown */}\n {fatsKeys.some(key => recipe.nutrition![key] !== null) && (\n

\n Fats Breakdown\n

\n {fatsKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label.replace(' Fat', '')}

\n \n );\n })}\n

\n {renderBreakdown(fatsKeys)}\n

\n )}\n\n {/* Sugars */}\n {sugarsKeys.some(key => recipe.nutrition![key] !== null) && (\n

\n Sugars & Starch\n

\n {sugarsKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label}

\n \n );\n })}\n

\n {renderBreakdown(sugarsKeys)}\n

\n )}\n\n {/* Minerals */}\n

\n Minerals\n

\n {mineralsKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label}

\n \n );\n })}\n

\n {renderBreakdown(mineralsKeys)}\n

\n \n {/* Vitamins - Fat Soluble */}\n

\n Vitamins (Fat-Soluble)\n

\n {vitFatKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label.replace('Vitamin ', 'Vit ')}

\n \n );\n })}\n

\n {renderBreakdown(vitFatKeys)}\n

\n\n {/* Vitamins - Water Soluble */}\n

\n Vitamins (Water-Soluble)\n

\n {vitWater1Keys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label.replace('Vitamin ', 'Vit ').replace(' (B1)', '').replace(' (B2)', '').replace(' (B3)', '')}

\n \n );\n })}\n

\n {vitWater2Keys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label.replace(' (B5)', '').replace(' (B7)', '')}

\n \n );\n })}\n

\n {renderBreakdown([...vitWater1Keys, ...vitWater2Keys])}\n

\n\n {/* Carotenoids */}\n {carotenoidKeys.some(key => recipe.nutrition![key] !== null) && (\n

\n Carotenoids\n

\n {carotenoidKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label}

\n \n );\n })}\n

\n {renderBreakdown(carotenoidKeys)}\n

\n )}\n\n {/* Other */}\n {otherKeys.some(key => recipe.nutrition![key] !== null && recipe.nutrition![key]! > 0) && (\n

\n Other\n

\n {otherKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null || value === 0) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label}

\n \n );\n })}\n

\n {renderBreakdown(otherKeys)}\n

\n )}\n

\n );\n}\n\n","deleted","label",[174,175,157],"frontend","components","permalink","https://www.val.town/x/shapedlines/carmy/code/frontend/components/NutritionSection.tsx","extension","actionData","errors"]