Drill 5: Summarise — Thinking in components

type StudyItem = {
  id: string
  title: string
  minutes: number
}

function StudyItemRow({ item, onSelect }: { item: StudyItem; onSelect: (id: string) => void }) {
  return (
    <li>
      <button onClick={() => onSelect(item.id)}>
        {item.title} ({item.minutes} min)
      </button>
    </li>
  )
}

function StudyList({ items, onSelect }: { items: StudyItem[]; onSelect: (id: string) => void }) {
  return (
    <ul>
      {items.map((item) => (
        <StudyItemRow key={item.id} item={item} onSelect={onSelect} />
      ))}
    </ul>
  )
}