From aeb613c36ab7274a412af874b544efbec19fc22f Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Thu, 12 Mar 2026 02:46:06 +0000
Subject: [PATCH] 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>
---
 src/components/people/PersonForm.jsx | 32 ++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/people/PersonForm.jsx

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