🍳

Cardamom

\n\n {/* Desktop Header - Original */}\n

🍳

Cardamom

Capture, Parse & Store Recipes

\n\n

\n navigateTo('list')}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n state.view === 'list'\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'\n }`}\n >\n 📚 Recipes\n \n navigateTo('meal-calendar')}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n state.view === 'meal-calendar'\n ? 'bg-purple-100 text-purple-700'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'\n }`}\n >\n 📅 Meal Calendar\n \n navigateTo('shopping-lists')}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n state.view.startsWith('shopping')\n ? 'bg-green-100 text-green-700'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'\n }`}\n >\n 🛒 Shopping Lists\n \n navigateTo('add')}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n state.view === 'add'\n ? 'bg-orange-100 text-orange-700'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'\n }`}\n >\n ➕ Add Recipe\n \n navigateTo('help')}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n state.view === 'help'\n ? 'bg-gray-100 text-gray-700'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'\n }`}\n >\n ❓ Help\n \n

\n \n );\n\n const renderContent = () => {\n if (state.loading) {\n return (\n

\n Loading...\n

\n );\n }\n\n if (state.error) {\n return (\n

⚠️

Error

{state.error}

\n setState(prev => ({ ...prev, error: null }))}\n className=\"mt-3 text-red-600 hover:text-red-800 text-sm font-medium\"\n >\n Dismiss\n \n

\n );\n }\n\n switch (state.view) {\n case 'list':\n return (\n navigateTo('view', recipe)}\n onRecipeEdit={(recipe) => navigateTo('edit', recipe)}\n onRecipeDelete={handleRecipeDeleted}\n onRefresh={loadRecipes}\n onCreateShoppingList={() => navigateTo('shopping-list-create')}\n onAddRecipe={() => navigateTo('add')}\n />\n );\n \n case 'add':\n return (\n navigateTo('list')}\n />\n );\n \n case 'edit':\n return (\n navigateTo('view', state.selectedRecipe)}\n />\n );\n \n case 'view':\n return (\n navigateTo('edit', recipe)}\n onDelete={handleRecipeDeleted}\n onBack={() => navigateTo('list')}\n />\n );\n\n case 'shopping-lists':\n return (\n navigateTo('shopping-list-view', undefined, shoppingList)}\n onCreateNew={() => navigateTo('shopping-list-create')}\n onRefresh={loadShoppingLists}\n onManageExcluded={() => navigateTo('excluded-ingredients')}\n />\n );\n\n case 'shopping-list-create':\n return (\n navigateTo('shopping-lists')}\n />\n );\n\n case 'shopping-list-view':\n return (\n navigateTo('shopping-lists')}\n onDelete={handleShoppingListDeleted}\n onUpdate={(updatedList) => {\n setState(prev => ({\n ...prev,\n selectedShoppingList: updatedList,\n shoppingLists: prev.shoppingLists.map(list => \n list.id === updatedList.id ? updatedList : list\n )\n }));\n }}\n />\n );\n\n case 'excluded-ingredients':\n return (\n navigateTo('shopping-lists')}\n />\n );\n\n case 'meal-calendar':\n return (\n navigateTo('list')}\n onCreateShoppingList={handleCreateShoppingListFromCalendar}\n />\n );\n\n case 'help':\n return (\n navigateTo('list')}\n />\n );\n\n default:\n return

Unknown view

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

\n {renderHeader()}\n

\n {renderContent()}\n

\n\n {/* Mobile Bottom Navigation */}\n

\n navigateTo('list')}\n className={`flex flex-col items-center justify-center space-y-1 transition-colors ${\n state.view === 'list'\n ? 'text-blue-600'\n : 'text-gray-600'\n }`}\n >\n 📚\n Recipes\n \n\n navigateTo('meal-calendar')}\n className={`flex flex-col items-center justify-center space-y-1 transition-colors ${\n state.view === 'meal-calendar'\n ? 'text-purple-600'\n : 'text-gray-600'\n }`}\n >\n 📅\n Calendar\n \n\n navigateTo('shopping-lists')}\n className={`flex flex-col items-center justify-center space-y-1 transition-colors ${\n state.view.startsWith('shopping')\n ? 'text-green-600'\n : 'text-gray-600'\n }`}\n >\n 🛒\n Lists\n \n\n navigateTo('help')}\n className={`flex flex-col items-center justify-center space-y-1 transition-colors ${\n state.view === 'help'\n ? 'text-blue-600'\n : 'text-gray-600'\n }`}\n >\n ❓\n Help\n \n

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