denam host

import React, { useState, useEffect } from "react";

export default function TodoApp() {
  const [todos, setTodos] = useState(() =>
    JSON.parse(localStorage.getItem("todos") || "[]")
  );
  const [input, setInput] = useState("");

  // Save todos to localStorage whenever they change
  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

  const addTodo = (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    setTodos([...todos, { id: Date.now(), text: input, done: false }]);
    setInput("");
  };

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

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

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="bg-white rounded-xl shadow-lg p-8 w-full max-w-md">
        <h1 className="text-2xl font-bold mb-6 text-center">To-Do List</h1>
        <form className="flex mb-4 gap-2" onSubmit={addTodo}>
          <input
            className="flex-1 border rounded-lg px-3 py-2 outline-none border-gray-300 focus:border-emerald-500"
            value={input}
            onChange={e => setInput(e.target.value)}
            placeholder="What needs to be done?"
            autoFocus
          />
          <button className="bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700" type="submit">
            Add
          </button>
        </form>
        <ul>
          {todos.length === 0 ? (
            <li className="text-center text-gray-400">No tasks yet.</li>
          ) : (
            todos.map(todo => (
              <li
                key={todo.id}
                className="flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0"
              >
                <label className="flex items-center gap-2 flex-1 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={todo.done}
                    onChange={() => toggleTodo(todo.id)}
                    className="w-4 h-4 accent-emerald-600"
                  />
                  <span className={todo.done ? "line-through text-gray-400" : ""}>
                    {todo.text}
                  </span>
                </label>
                <button
                  className="ml-2 text-gray-400 hover:text-red-500 text-lg px-2"
                  onClick={() => deleteTodo(todo.id)}
                  aria-label="Delete"
                >
                  ×
                </button>
              </li>
            ))
          )}
        </ul>
      </div>
    </div>
  );
}