\n {/* Stats */}\n

📋

{items.length}

Items Listed

✓

{purchased}

Picked Up

🛒

{needed}

Still Needed

🏪

{departments.size}

Departments

\n\n

\n {/* Item list */}\n

\n Shopping List\n

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

🛒

Your grocery list is empty

\n ) : (\n items.map((item) => (\n

{item.name}

\n {item.quantity}\n {item.category}\n handleToggle(item)}\n >\n {item.purchased ? \"Undo\" : \"Bought\"}\n \n \n

\n ))\n )}\n

\n\n {/* Add + departments */}\n

\n Add Item\n

\n Item Name\n setForm({ ...form, name: e.target.value })} placeholder=\"e.g., Milk\" onKeyDown={(e) => e.key === \"Enter\" && handleAdd()} />\n

\n Quantity\n setForm({ ...form, quantity: e.target.value })} />\n

\n Category\n setForm({ ...form, category: e.target.value })} placeholder=\"Produce\" />\n

\n \n

\n\n {departments.size > 0 && (\n

\n Departments\n

\n {[...departments.entries()].map(([dept, count]) => (\n

{count}

{dept}

\n ))}\n

\n )}\n

\n );\n}\n","deleted","label",[177,178,159],"frontend","components","permalink","https://www.val.town/x/arfan/family-hub/code/frontend/components/Grocery.tsx","extension","actionData","errors"]