generated_projects/frontend/src/components/TodoForm.jsx

import React, { useState } from 'react';

function TodoForm({ onAdd }) {
  const [title, setTitle] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!title.trim()) return;
    onAdd(title.trim());
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit} style={{ marginBottom: '1rem' }}>
      <input
        type="text"
        placeholder="New todo"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        style={{ padding: '0.5rem', width: '80%' }}
      />
      <button type="submit" style={{ padding: '0.5rem' }}>
        Add
      </button>
    </form>
  );
}

export default TodoForm;