first commit

src/pageElements/ListPagination.js

@@ -0,0 +1,24 @@
+import Pagination from "react-bootstrap/Pagination";
+
+const ListPagination = (props) => {
+  const { totalPages, page, setPage } = props;
+
+  const handlePaginationItemClick = (event) => {
+    const targetPage = Number(event.currentTarget.dataset.page);
+    if (!isNaN(targetPage)) {
+      setPage(targetPage);
+    }
+  };
+
+  return (
+    <Pagination className="justify-content-end">
+      {page !== 1 ? <Pagination.Prev data-page={page - 1} onClick={handlePaginationItemClick}/> : null}
+      {Array.from({ length: totalPages }, (v, i) => i + 1).map(n => (
+        <Pagination.Item key={`page${n}`} active={n === page} data-page={n} onClick={handlePaginationItemClick}>{n}</Pagination.Item>
+      ))}
+      {page !== totalPages ? <Pagination.Next data-page={page + 1} onClick={handlePaginationItemClick}/> : null}
+    </Pagination>
+  );
+};
+
+export default ListPagination;