From 77d0afed542c67de7ec01d5d3b806751fd3ecc18 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Thu, 12 Mar 2026 02:51:29 +0000
Subject: [PATCH] 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
---
 src/components/items/ItemsList.jsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/items/ItemsList.jsx

diff --git a/src/components/items/ItemsList.jsx b/src/components/items/ItemsList.jsx
new file mode 100644
index 0000000..e0ad155
--- /dev/null
+++ b/src/components/items/ItemsList.jsx
@@ -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>
+  );
+}