Updates

components/elements/Pagination.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, Dispatch, SetStateAction } from "react";
+import type { ComponentProps, Dispatch, SetStateAction } from "react";
 import _ from "lodash";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { twMerge } from "tailwind-merge";
@@ -35,12 +35,30 @@ export default function Pagination({
 
     const pages = Math.ceil(count / limit);
 
+    const next_button = (
+        <Button
+            title="Next Page Button"
+            onClick={() => {
+                window.scrollTo({ top: 0, behavior: "smooth" });
+                setPage?.((prev) => prev + 1);
+            }}
+            variant="outlined"
+            size="small"
+            className={twMerge(
+                "p-1",
+                isLimit ? "opacity-40 pointer-events-none" : "",
+            )}
+        >
+            <ChevronRight size={20} />
+        </Button>
+    );
+
     return (
         <Row
             {...props}
             className={twMerge(
-                "w-full justify-between flex-nowrap",
-                props.className
+                "w-full justify-between md:flex-nowrap",
+                props.className,
             )}
         >
             {pages > 1 && (
@@ -54,21 +72,31 @@ export default function Pagination({
                     size="small"
                     className={twMerge(
                         "p-1",
-                        page == 1 ? "opacity-40 pointer-events-none" : ""
+                        page == 1 ? "opacity-40 pointer-events-none" : "",
                     )}
                 >
                     <ChevronLeft size={20} />
                 </Button>
             )}
 
-            <Row className={twMerge("gap-6 w-full flex-nowrap justify-center")}>
-                <Span size="small" variant="faded">
+            {pages > 1 && <div className="flex md:hidden">{next_button}</div>}
+
+            <Row
+                className={twMerge(
+                    "gap-6 w-full md:flex-nowrap justify-center",
+                )}
+            >
+                <Span
+                    size="small"
+                    variant="faded"
+                    className="whitespace-nowrap"
+                >
                     Page {page} / {pages}
                 </Span>
                 {pages > 1 && (
                     <Row
                         className={twMerge(
-                            "flex-nowrap overflow-x-auto p-1 max-w-[90%]"
+                            "flex-nowrap overflow-x-auto p-1 max-w-[90%]",
                         )}
                     >
                         {Array(pages)
@@ -92,7 +120,7 @@ export default function Pagination({
                                         size="small"
                                         color={isCurrent ? "primary" : "gray"}
                                         className={twMerge(
-                                            "p-1 w-6 h-6 min-w-6"
+                                            "p-1 w-6 h-6 min-w-6",
                                         )}
                                         key={index}
                                     >
@@ -104,23 +132,7 @@ export default function Pagination({
                 )}
             </Row>
 
-            {pages > 1 && (
-                <Button
-                    title="Next Page Button"
-                    onClick={() => {
-                        window.scrollTo({ top: 0, behavior: "smooth" });
-                        setPage?.((prev) => prev + 1);
-                    }}
-                    variant="outlined"
-                    size="small"
-                    className={twMerge(
-                        "p-1",
-                        isLimit ? "opacity-40 pointer-events-none" : ""
-                    )}
-                >
-                    <ChevronRight size={20} />
-                </Button>
-            )}
+            {pages > 1 && <div className="hidden md:flex">{next_button}</div>}
         </Row>
     );
 }