Build Apps with GPT-4.1

import { useState } from "react"

interface Todo {
  id: string
  text: string
  completed: boolean
}

function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([])
  const [input, setInput] = useState("")

  const addTodo = () => {
    if (!input.trim()) return
    setTodos(prev => [...prev, {
      id: crypto.randomUUID(),
      text: input.trim(),
      completed: false,
    }])
    setInput("")
  }

  const toggleTodo = (id: string) =>
    setTodos(prev => prev.map(t =>
      t.id === id ? { ...t, completed: !t.completed } : t
    ))

  const deleteTodo = (id: string) =>
    setTodos(prev => prev.filter(t => t.id !== id))

  return (
    <div className="max-w-md mx-auto p-6">
      <div className="flex gap-2 mb-4">
        <input value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === "Enter" && addTodo()}
          placeholder="Add a task..."
          className="flex-1 border rounded-lg px-3 py-2" />
        <button onClick={addTodo}
          className="bg-blue-600 text-white px-4 rounded-lg">
          Add
        </button>
      </div>
      <ul className="space-y-2">
        {todos.map(todo => (
          <li key={todo.id} className="flex items-center gap-3 p-3 border rounded-lg">
            <input type="checkbox" checked={todo.completed}
              onChange={() => toggleTodo(todo.id)} />
            <span className={todo.completed ? "line-through text-gray-400 flex-1" : "flex-1"}>
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}
              className="text-red-500 text-sm">Delete</button>
          </li>
        ))}
      </ul>
    </div>
  )
}