From 49142bdfdd7cd42fcf2b536e1e7a52a045120d55 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Thu, 12 Mar 2026 02:50:31 +0000
Subject: [PATCH] feat(01-04): create ItemForm component for adding items

- Controlled form with name and price inputs
- Calls store.addItem on form submit
- Shows error message on validation failure
- Clears inputs on successful add
---
 src/components/items/ItemForm.jsx | 41 +++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/items/ItemForm.jsx

diff --git a/src/components/items/ItemForm.jsx b/src/components/items/ItemForm.jsx
new file mode 100644
index 0000000..190d460
--- /dev/null
+++ b/src/components/items/ItemForm.jsx
@@ -0,0 +1,41 @@
+import { useState } from 'preact/hooks';
+import { store } from '../../store/billStore.js';
+
+export function ItemForm() {
+  const [name, setName] = useState('');
+  const [price, setPrice] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const result = store.addItem(name, price);
+    if (result.success) {
+      setName('');
+      setPrice('');
+      setError('');
+    } else {
+      setError(result.error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} class="item-form">
+      <input
+        type="text"
+        value={name}
+        onInput={(e) => setName(e.target.value)}
+        placeholder="Item name"
+        aria-label="Item name"
+      />
+      <input
+        type="text"
+        value={price}
+        onInput={(e) => setPrice(e.target.value)}
+        placeholder="Price (e.g., 15.99)"
+        aria-label="Item price"
+      />
+      <button type="submit">Add Item</button>
+      {error && <p class="error">{error}</p>}
+    </form>
+  );
+}