Extract Pagination component

app/components/Pagination.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import { Button } from "~/components/Button";
+import { ArrowLeftIcon } from "~/components/icons/ArrowLeft";
+import { ArrowRightIcon } from "~/components/icons/ArrowRight";
+import { nullFilledArray } from "~/utils/arrays";
+
+export function Pagination({
+  currentPage,
+  pagesCount,
+  nextPage,
+  previousPage,
+  setPage,
+}: {
+  currentPage: number;
+  pagesCount: number;
+  nextPage: () => void;
+  previousPage: () => void;
+  setPage: (page: number) => void;
+}) {
+  return (
+    <div className="stack sm horizontal items-center justify-center flex-wrap">
+      <Button
+        icon={<ArrowLeftIcon />}
+        variant="outlined"
+        disabled={currentPage === 1}
+        onClick={previousPage}
+        aria-label="Previous page"
+      />
+      {nullFilledArray(pagesCount).map((_, i) => (
+        <div
+          key={i}
+          className={clsx("pagination__dot", {
+            pagination__dot__active: i === currentPage - 1,
+          })}
+          onClick={() => setPage(i + 1)}
+        />
+      ))}
+      <Button
+        icon={<ArrowRightIcon />}
+        variant="outlined"
+        disabled={currentPage === pagesCount}
+        onClick={nextPage}
+        aria-label="Next page"
+      />
+    </div>
+  );
+}

app/features/art/components/ArtGrid.tsx

@@ -16,9 +16,6 @@ import * as React from "react";
 import { useSimplePagination } from "~/hooks/useSimplePagination";
 import { ART_PER_PAGE } from "../art-constants";
 import { Button, LinkButton } from "~/components/Button";
-import { ArrowRightIcon } from "~/components/icons/ArrowRight";
-import { ArrowLeftIcon } from "~/components/icons/ArrowLeft";
-import { nullFilledArray } from "~/utils/arrays";
 import clsx from "clsx";
 import { EditIcon } from "~/components/icons/Edit";
 import { useTranslation } from "~/hooks/useTranslation";
@@ -26,6 +23,7 @@ import { previewUrl } from "../art-utils";
 import { TrashIcon } from "~/components/icons/Trash";
 import { FormWithConfirm } from "~/components/FormWithConfirm";
 import { useSearchParamState } from "~/hooks/useSearchParamState";
+import { Pagination } from "~/components/Pagination";
 
 export function ArtGrid({
   arts,
@@ -79,7 +77,7 @@ export function ArtGrid({
         </Masonry>
       </ResponsiveMasonry>
       {!everythingVisible ? (
-        <SimplePagination
+        <Pagination
           currentPage={currentPage}
           pagesCount={pagesCount}
           nextPage={nextPage}
@@ -227,45 +225,3 @@ function ImagePreview({
     </Link>
   );
 }
-
-function SimplePagination({
-  currentPage,
-  pagesCount,
-  nextPage,
-  previousPage,
-  setPage,
-}: {
-  currentPage: number;
-  pagesCount: number;
-  nextPage: () => void;
-  previousPage: () => void;
-  setPage: (page: number) => void;
-}) {
-  return (
-    <div className="stack sm horizontal items-center justify-center flex-wrap">
-      <Button
-        icon={<ArrowLeftIcon />}
-        variant="outlined"
-        disabled={currentPage === 1}
-        onClick={previousPage}
-        aria-label="Previous page"
-      />
-      {nullFilledArray(pagesCount).map((_, i) => (
-        <div
-          key={i}
-          className={clsx("pagination__dot", {
-            pagination__dot__active: i === currentPage - 1,
-          })}
-          onClick={() => setPage(i + 1)}
-        />
-      ))}
-      <Button
-        icon={<ArrowRightIcon />}
-        variant="outlined"
-        disabled={currentPage === pagesCount}
-        onClick={nextPage}
-        aria-label="Next page"
-      />
-    </div>
-  );
-}