feat(01-04): create ItemsList component for displaying items

- Subscribes to store.items signal
- Displays each item with name and formatted price
- Includes ItemAssign component for each item
- Shows empty state when no items added
This commit is contained in:
2026-03-12 02:51:29 +00:00
parent 24f5fc14b2
commit 77d0afed54
+25
View File
@@ -0,0 +1,25 @@
import { store } from '../../store/billStore.js';
import { formatCurrency } from '../../utils/currency.js';
import { ItemAssign } from './ItemAssign.jsx';
export function ItemsList() {
const items = store.items.value;
if (items.length === 0) {
return <p class="empty-state">No items added yet</p>;
}
return (
<ul class="items-list">
{items.map((item) => (
<li key={item.id} class="item-row">
<div class="item-header">
<span class="item-name">{item.name}</span>
<span class="item-price">{formatCurrency(item.priceCents)}</span>
</div>
<ItemAssign item={item} />
</li>
))}
</ul>
);
}