\n {/* Mobile Header */}\n

Shopping Lists

\n Manage your grocery shopping lists\n

\n \n 🚫\n Excluded Items\n \n \n ➕\n Create New List\n \n

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

Shopping Lists

\n Manage your grocery shopping lists\n

\n \n 🚫 Excluded Items\n \n \n 🔄 Refresh\n \n \n ➕ Create New List\n \n

\n\n {shoppingLists.length === 0\n ? (\n

🛒

No Shopping Lists Yet

\n Create your first shopping list by selecting recipes and combining their ingredients.\n

\n \n Create Your First Shopping List\n \n

\n )\n : (\n

\n {shoppingLists.map((list) => {\n const progress = getListProgress(list);\n const totalItems = list.items.length;\n const checkedItems = list.items.filter(item => item.checked).length;\n\n return (\n onShoppingListSelect(list)}\n className=\"bg-white border border-gray-200 rounded-lg p-4 md:p-6 hover:shadow-md transition-all cursor-pointer hover:border-gray-300 active:scale-95\"\n >\n

\n {list.name}\n

🛒

\n\n

\n {checkedItems} of {totalItems} items\n {Math.round(progress)}%\n

\n \n

\n\n

\n Created {new Date(list.createdAt!).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"America/New_York\",\n })}\n

\n\n {progress === 100 && (\n

\n ✅ Complete\n

\n )}\n

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