function App() { const [todos, setTodos] = useState([ { id: 1, text: "Try editing this code", done: false }, { id: 2, text: "Click the checkboxes", done: true }, ]) const inputRef = useRef(null) const nextId = useRef(3) const addTodo = useCallback(() => { const input = inputRef.current if (!input || !input.value.trim()) return setTodos((prev) => [ ...prev, { id: nextId.current++, text: input.value.trim(), done: false }, ]) input.value = "" input.focus() }, []) const toggle = useCallback((id) => { setTodos((prev) => prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t)) ) }, []) const remove = useCallback((id) => { setTodos((prev) => prev.filter((t) => t.id !== id)) }, []) return (

Todos ({todos.filter((t) => !t.done).length} remaining)

e.key === "Enter" && addTodo()} className="flex-1 rounded border border-border-dim bg-bg-base px-12 py-8 text-body-sm text-fg-base placeholder:text-fg-faint focus:border-border-base focus:outline-none" />

toggle(todo.id)} className="accent-fg-accent-blue" /> {todo.text}

{todos.length === 0 && (

All done! Add something above.

)}

) }