Excluded Ingredients

\n Manage ingredients that won't be added to shopping lists\n

\n \n ← Back\n \n

\n\n {error && (\n

⚠️

Error

{error}

\n setError(null)}\n className=\"mt-3 text-red-600 hover:text-red-800 text-sm font-medium\"\n >\n Dismiss\n \n

\n )}\n\n {/* Add New Excluded Ingredient Form */}\n

Add Excluded Ingredient

\n \n Display Name\n \n setNewIngredient(prev => ({ ...prev, name: e.target.value }))}\n placeholder=\"e.g., Salt\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n disabled={saving}\n />\n

\n \n Pattern to Match\n \n setNewIngredient(prev => ({ ...prev, pattern: e.target.value }))}\n placeholder=\"e.g., salt\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n disabled={saving}\n />\n

\n Tip: The pattern will match any ingredient name that contains this text. \n For example, \"salt\" will match \"kosher salt\", \"sea salt\", \"table salt\", etc.\n

\n \n {saving ? 'Adding...' : 'Add Excluded Ingredient'}\n \n \n

\n\n {/* Excluded Ingredients List */}\n

Current Excluded Ingredients

\n \n {loading ? (\n

\n Loading...\n

\n ) : excludedIngredients.length === 0 ? (\n

\n No excluded ingredients found.\n

\n ) : (\n

\n {excludedIngredients.map((ingredient) => (\n

{ingredient.name}

\n Pattern: {ingredient.pattern}\n

\n {ingredient.createdAt && (\n

\n Added {new Date(ingredient.createdAt).toLocaleDateString()}\n

\n )}\n

\n handleDelete(ingredient.id!)}\n className=\"px-3 py-1 text-sm text-red-600 hover:text-red-800 hover:bg-red-50 rounded transition-colors\"\n >\n Remove\n \n

\n ))}\n

\n )}\n

\n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/connnolly/cardamom/code/frontend/components/ExcludedIngredientsManager.tsx","extension","actionData","errors"]