[upgrade] Abstract components on the page into subcomponents

components/utils/Pagination.tsx

@@ -0,0 +1,63 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { type ChangeEvent, type KeyboardEvent, useState } from "react";
+import { MdNavigateBefore, MdNavigateNext } from "react-icons/md";
+
+export const Pagination = (props: {
+  pageNumber: number;
+  pageAmount: number;
+  onGotoNextPage: (nextPage: number) => any;
+  onGotoPrevPage: (prevPage: number) => any;
+  onJumpToSpecPage: (pageNum: number) => any;
+}) => {
+  const [pageNumberInput, setPageNumberInput] = useState<string>(props.pageNumber.toString());
+
+  const handleEnterKeyJump = (event: KeyboardEvent<HTMLInputElement>) => {
+    setPageNumberInput(pageNumberInput.replace(/[^\d]/g, ""));
+    if (Number.parseInt(pageNumberInput) > 0 && Number.parseInt(pageNumberInput) < props.pageAmount + 1) {
+      (event.key === "Go" || event.key === "Enter") && props.onJumpToSpecPage(Number.parseInt(pageNumberInput));
+      return;
+    }
+  };
+
+  const handleInputPageNumber = (event: ChangeEvent<HTMLInputElement>) => {
+    setPageNumberInput(event.target.value);
+  };
+
+  return (
+    <div className="my-5 flex justify-between font-bold text-base rtl:flex-row-reverse">
+      {props.pageNumber !== 1 && (
+        <Button
+          className="rounded-full"
+          onClick={() => {
+            setPageNumberInput((props.pageNumber - 1).toString());
+            props.onGotoPrevPage(props.pageNumber - 1);
+          }}
+        >
+          <MdNavigateBefore className="text-3xl" />
+        </Button>
+      )}
+      <div className="my-auto flex justify-center font-bold">
+        <Input
+          className="mx-2 my-auto h-6 w-11"
+          onChange={handleInputPageNumber}
+          onKeyDown={handleEnterKeyJump}
+          title="Type the specified page number and press Enter to jump."
+          value={pageNumberInput}
+        />
+        <div className="my-auto">{`  /  ${props.pageAmount}`}</div>
+      </div>
+      {props.pageNumber !== props.pageAmount && (
+        <Button
+          className="rounded-full"
+          onClick={() => {
+            setPageNumberInput((props.pageNumber + 1).toString());
+            props.onGotoNextPage(props.pageNumber + 1);
+          }}
+        >
+          <MdNavigateNext className="text-3xl" />
+        </Button>
+      )}
+    </div>
+  );
+};