mirror of
https://github.com/tiennm99/gsd-framework.git
synced 2026-06-08 22:15:18 +00:00
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user