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
This commit is contained in:
2026-03-12 02:50:31 +00:00
parent be6e89e698
commit 49142bdfdd
+41
View File
@@ -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>
);
}