Function ItemList

example/src/pages/Main/ItemList.jsx:22–51

({ items, isLoading, error, nextPage, previousPage, onSelect })

};

function ItemList({ items, isLoading, error, nextPage, previousPage, onSelect }) {
  return (
    <Panel className="grid grid-rows-[1fr_min-content] p-4">
      <div className="overflow-x-clip">
        <H2>Item List</H2>
        {isLoading && <p>Loading...</p>}
        {error && <p>{error}</p>}
        {items && (
          <ul className="space-y-2">
            {items.features.map((item) => (
              <li key={item.id}>
                <button onClick={onSelect(item)} className="text-pretty">
                  {item.id}
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
      <div className="grid grid-cols-2 gap-4">
        <PaginationButton disabled={!previousPage} onClick={previousPage}>
          Previous page
        </PaginationButton>
        <PaginationButton disabled={!nextPage} onClick={nextPage}>
          Next page
        </PaginationButton>
      </div>
    </Panel>
  );
}

ItemList.propTypes = {
  items: TItemList,