最佳待办事项App

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (input.trim() !== '') {
      const newTodo = {
        id: Date.now(),
        text: input,
        completed: false
      };
      setTodos([...todos, newTodo]);
      setInput('');
    }
  };

  const toggleTodo = (id) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="App">
      <header className="bg-blue-500 text-white p-4">
        <h1 className="text-2xl font-bold">Todo List</h1>
      </header>
      <main className="p-4">
        <div className="mb-4">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            className="border p-2 w-full"
            placeholder="Add a new todo"
          />
          <button onClick={addTodo} className="bg-blue-500 text-white p-2 mt-2 w-full">Add Todo</button>
        </div>
        <ul>
          {todos.map(todo => (
            <li key={todo.id} className="flex justify-between items-center p-2 border-b">
              <span className={todo.completed ? 'line-through' : ''}>{todo.text}</span>
              <div>
                <button onClick={() => toggleTodo(todo.id)} className="text-green-500 mr-2">Toggle</button>
                <button onClick={() => deleteTodo(todo.id)} className="text-red-500">Delete</button>
              </div>
            </li>
          ))}
        </ul>
      </main>
      <footer className="bg-gray-200 p-4 text-center">
        <p>&copy; 2025 Todo List App</p>
      </footer>
    </div>
  );
};

export default App;