Create Shopping List

\n Select recipes to combine their ingredients into a shopping list\n

\n \n ✕\n \n

\n\n

\n {error && (\n

⚠️

Error

{error}

\n )}\n\n

\n setSearchQuery(e.target.value)}\n placeholder=\"Search recipes by name, ingredient, or tag...\"\n className=\"w-full px-4 py-2 pl-10 pr-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n

\n {searchQuery && (\n setSearchQuery(\"\")}\n className=\"absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600\"\n >\n \n \n )}\n

\n\n

\n {searchQuery ? (\n <>\n {filteredRecipes.length} recipe{filteredRecipes.length !== 1 ? 's' : ''} found\n {selectedRecipeIds.length > 0 && ` (${selectedRecipeIds.length} selected)`}\n \n ) : (\n `${selectedRecipeIds.length} of ${recipes.length} recipes selected`\n )}\n

\n \n Select All\n \n |\n \n Select None\n \n

\n\n

\n {filteredRecipes.map((recipe) => (\n handleRecipeToggle(recipe.id!)}\n >\n

\n handleRecipeToggle(recipe.id!)}\n className=\"h-4 w-4 text-blue-600 rounded border-gray-300 mr-3\"\n />\n

{recipe.title}

\n 🥘 {recipe.ingredients.length} ingredients\n {recipe.servings && (\n <>\n •\n 👥 {recipe.servings} servings\n \n )}\n {recipe.prepTime && (\n <>\n •\n ⏱️ {recipe.prepTime}min prep\n \n )}\n

\n ))}\n

\n\n {filteredRecipes.length === 0 && (\n

\n {searchQuery ? (\n <>\n

🔍

No recipes found matching \"{searchQuery}\"

Try a different search term or clear the search

\n \n ) : (\n <>\n

📝

No recipes available

Add some recipes first to create a shopping list

\n \n )}\n

\n )}\n

\n\n

\n \n Cancel\n \n \n {loading ? (\n

\n Creating...\n

\n ) : (\n `Create Shopping List (${selectedRecipeIds.length} recipes)`\n )}\n \n

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