feat(01-03): create PersonForm component

- Controlled form with useState for local state
- Calls store.addPerson on form submit
- Shows error message if addPerson fails
- Clears input on successful add
- Uses Preact hooks for form state management

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 02:46:06 +00:00
co-authored by Claude Opus 4.6
parent 51564970e2
commit aeb613c36a
+32
View File
@@ -0,0 +1,32 @@
import { useState } from 'preact/hooks';
import { store } from '../../store/billStore.js';
export function PersonForm() {
const [name, setName] = useState('');
const [error, setError] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
const result = store.addPerson(name);
if (result.success) {
setName('');
setError('');
} else {
setError(result.error);
}
};
return (
<form onSubmit={handleSubmit} class="person-form">
<input
type="text"
value={name}
onInput={(e) => setName(e.target.value)}
placeholder="Enter name"
aria-label="Person name"
/>
<button type="submit">Add Person</button>
{error && <p class="error">{error}</p>}
</form>
);
}