implement components

agent/open-code/nodes/plan-code/step-4.txt

@@ -0,0 +1,33 @@
+```tsx
+// src/components/AddTodo.tsx
+import React, { useState } from 'react';
+import styles from '../styles/AddTodo.module.css';
+
+export const AddTodo: React.FC<{ onAdd: (text: string) => void }> = ({ onAdd }) => {
+  const [text, setText] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!text.trim()) {
+      setError('Todo text cannot be empty');
+      return;
+    }
+    onAdd(text.trim());
+    setText('');
+    setError('');
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={styles.form}>
+      <input
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder='Add a new todo'
+      />
+      {error && <div className={styles.error}>{error}</div>}
+      <button type='submit'>Add Todo</button>
+    </form>
+  );
+};
+```