1import { useState } from 'react'

2import type { Todo } from './types'

4export function TodoList() {

5 const [items, setItems] = useState<Todo[]>([])

6 const [filter, setFilter] = useState<'all'|'open'|'done'>('all')

8 const add = (title: string) => {

9 setItems(prev => [...prev, { id: uid(), title, done: false }])

12 const toggle = (id: string) => {

13 setItems(prev => prev.map(it =>

14 it.id === id ? { ...it, done: !it.done } : it

21 return (

22 <section className="max-w-md mx-auto">

23 <Header onAdd={add} />

24 <FilterBar value={filter} onChange={setFilter} />

27 <TodoItem key={it.id} item={it} onToggle={toggle} />

30 </section>

32}