🚧 process store pagination

website/src/components/Paginate/index.tsx

@@ -0,0 +1,40 @@
+import React, { useCallback } from "react";
+import ReactPaginate from "react-paginate";
+import { usePagination } from "react-use-pagination";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import styles from "./styles.module.css";
+
+export default function Paginate({
+  totalPages,
+  setPage,
+}: ReturnType<typeof usePagination>): JSX.Element {
+  const onPageChange = useCallback(
+    (selectedItem: { selected: number }) => {
+      setPage(selectedItem.selected);
+    },
+    [setPage]
+  );
+
+  return (
+    <nav role="navigation" aria-label="Pagination Navigation">
+      <ReactPaginate
+        pageCount={totalPages}
+        onPageChange={onPageChange}
+        containerClassName={styles.container}
+        pageClassName={styles.li}
+        pageLinkClassName={styles.a}
+        previousClassName={styles.li}
+        previousLinkClassName={styles.a}
+        nextClassName={styles.li}
+        nextLinkClassName={styles.a}
+        activeLinkClassName={styles.active}
+        disabledLinkClassName={styles.disabled}
+        breakLabel={<FontAwesomeIcon icon="ellipsis-h" />}
+        previousLabel={<FontAwesomeIcon icon="chevron-left" />}
+        nextLabel={<FontAwesomeIcon icon="chevron-right" />}
+      ></ReactPaginate>
+    </nav>
+  );
+}

website/src/components/Paginate/styles.module.css

@@ -0,0 +1,29 @@
+.container {
+  @apply w-full max-w-full inline-flex justify-center items-center m-0 pl-0 list-none;
+}
+
+.li {
+  @apply flex items-center;
+}
+
+.a {
+  height: 34px;
+  width: auto;
+  min-width: 34px;
+  @apply m-1 px-1 border-2 rounded shadow-lg text-center;
+  @apply text-black;
+  @apply bg-light-nonepress-100;
+}
+
+:global(.dark) .a {
+  @apply text-white bg-dark-nonepress-100;
+}
+
+.active {
+  @apply bg-hero text-white border-hero;
+}
+
+
+.disabled {
+  @apply opacity-60 pointer-events-none;
+}