\n \n {info.label} ({info.unit})\n \n handleNutrientChange(key, e.target.value)}\n className=\"input text-sm py-1.5\"\n placeholder=\"0\"\n />\n

\n );\n };\n\n return (\n

\n e.stopPropagation()}\n >\n

\n {/* Header */}\n

\n {customFood ? 'Edit Custom Food' : 'Add Custom Food'}\n

\n \n \n \n

\n Create a food with custom nutrition values\n

\n\n {/* Scrollable content */}\n

\n {/* Name */}\n

\n \n Name *\n \n setName(e.target.value)}\n className=\"input\"\n placeholder=\"e.g., Homemade Protein Shake\"\n required\n />\n

\n\n {/* Serving Size */}\n

\n \n Serving Size (grams)\n \n setServingSizeGrams(e.target.value)}\n className=\"input w-32\"\n placeholder=\"100\"\n />\n

\n Nutrition values are per this serving size\n

\n\n {/* Macronutrients */}\n

Macronutrients

\n {MACRO_KEYS.map(key => renderNutrientInput(key))}\n

\n\n {/* Toggle for micronutrients */}\n

\n setShowMicronutrients(!showMicronutrients)}\n className=\"text-sm font-medium flex items-center gap-2\"\n style={{ color: 'var(--accent)' }}\n >\n \n \n \n {showMicronutrients ? 'Hide' : 'Show'} Vitamins & Minerals (optional)\n \n

\n\n {/* Micronutrients (collapsible) */}\n {showMicronutrients && (\n

\n {/* Minerals */}\n

Minerals

\n {MINERAL_KEYS.map(key => renderNutrientInput(key))}\n

\n\n {/* Vitamins */}\n

Vitamins

\n {VITAMIN_KEYS.map(key => renderNutrientInput(key))}\n

\n )}\n

\n\n {/* Footer */}\n

\n \n Cancel\n \n \n {submitting ? 'Saving...' : customFood ? 'Save Changes' : 'Create Food'}\n \n

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