mirror of
https://github.com/tiennm99/gsd-framework.git
synced 2026-05-28 04:21:56 +00:00
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user