Add pagination buttons

Author: oliverroick

example/src/components/buttons/index.jsx

@@ -11,7 +11,7 @@ const DefaultButtonType = {
   className: T.string,
 }
 
-function Button({ type, className, children, onClick }) {
+export function Button({ type, className, children, onClick }) {
   return (
     <button
       type={type}

example/src/layout/Panel/index.jsx

@@ -1,7 +1,7 @@
 import T from 'prop-types';
 
 function Panel({ children, className }) {
-  return <div className={`bg-slate-100 p-4 overflow-x-clip overflow-y-auto ${className}`}>{ children }</div>;
+  return <div className={`bg-slate-100 p-4 ${className}`}>{ children }</div>;
 }
 
 Panel.propTypes = {

example/src/pages/Main/ItemList.jsx

@@ -3,30 +3,59 @@ import { TItemList } from "./proptypes";
 
 import { H2 } from "../../components/headers";
 import Panel from "../../layout/Panel";
+import { Button } from "../../components/buttons";
 
 
 
-function ItemList ({ items, isLoading, error }) {
+function PaginationButton ({disabled, onClick, children}) {
   return (
-    <Panel>
-      <H2>Item List</H2>
-      {isLoading && (<p>Loading...</p>)}
-      {error && (<p>{ error }</p>)}
-      {items && (
-        <ul>
-          {items.features.map(({ id }) => (
-            <li key={id}>{ id }</li>
-          ))}
-        </ul>
-      )}
+    <Button
+      disabled={disabled}
+      onClick={onClick}
+      className="bg-slate-500 text-white"
+    >
+      {children}
+    </Button>
+  );
+}
+
+PaginationButton.propTypes = {
+  disabled: T.bool,
+  onClick: T.func.isRequired,
+  children: T.node.isRequired
+}
+
+
+
+function ItemList ({ items, isLoading, error, nextPage, previousPage }) {
+  return (
+    <Panel className="grid grid-rows-[1fr_min-content]">
+      <div className="overflow-x-clip">
+        <H2>Item List</H2>
+        {isLoading && (<p>Loading...</p>)}
+        {error && (<p>{ error }</p>)}
+        {items && (
+          <ul>
+            {items.features.map(({ id }) => (
+              <li key={id}>{ id }</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,
   isLoading: T.bool,
-  error: T.string
+  error: T.string,
+  previousPage: T.func,
+  nextPage: T.func
 }
 
 export default ItemList;

example/src/pages/Main/index.jsx

@@ -19,7 +19,9 @@ function Main() {
     submit,
     results,
     state,
-    error
+    error,
+    nextPage,
+    previousPage
   } = useStacSearch(stacApi);
 
   const handleDrawComplete = useCallback((feature) => {
@@ -42,7 +44,13 @@ function Main() {
         dateRangeTo={dateRangeTo}
         setDateRangeTo={setDateRangeTo}
       />
-      <ItemList items={results} isLoading={state === 'LOADING'} error={error && 'Error loading results'} />
+      <ItemList
+        items={results}
+        isLoading={state === 'LOADING'}
+        error={error && 'Error loading results'}
+        nextPage={nextPage}
+        previousPage={previousPage}
+      />
       <Map
         className='col-span-2'
         isBboxDrawEnabled={isBboxDrawEnabled}