Update pagination.tsx

Resolve Conflicts

Author: offbeatjs

src/app/(public)/repos/_components/pagination.tsx

@@ -1,13 +1,9 @@
+'use client';
+
 import { Button } from '@/app/(public)/_components/button';
-<<<<<<< Updated upstream
-import { ArrowLeft, ArrowRight } from 'lucide-react';
-import Link from 'next/link';
-import type { SearchParams } from '@/types';
-=======
 import { ArrowLeft, ArrowRight, Loader2 } from 'lucide-react';
 import { useTransition } from 'react';
 import { useQueryState } from 'nuqs';
->>>>>>> Stashed changes
 
 const MAX_PER_PAGE = 21;
 interface PaginationProps {
@@ -19,8 +15,6 @@ export function Pagination({
   page,
   totalCount
 }: PaginationProps) {
-<<<<<<< Updated upstream
-=======
   const [, setPageParam] = useQueryState('p', {
     defaultValue: '1',
     parse: (value: string) => value,
@@ -35,25 +29,46 @@ export function Pagination({
     });
   }
 
->>>>>>> Stashed changes
   return (
     <div className="flex flex-col items-center gap-4 my-6 justify-evenly sm:gap-0 sm:flex-row">
       {page > 1 && (
-        <Link href={{ query: { ...searchParams, p: page - 1 } }}>
-          <Button className="btn-wide hover:bg-primary-btn-hover-gradient hover:text-hacktoberfest-dark-green">
-            <ArrowLeft />
-            <span className="ml-2">Previous Page</span>
-          </Button>
-        </Link>
+        <Button
+          onClick={() => changePage(-1)}
+          disabled={isPending}
+          className="btn-wide hover:bg-primary-btn-hover-gradient hover:text-hacktoberfest-dark-green disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isPending ? (
+            <>
+              <Loader2 className="animate-spin" />
+              <span className="ml-2">Loading...</span>
+            </>
+          ) : (
+            <>
+              <ArrowLeft />
+              <span className="ml-2">Previous Page</span>
+            </>
+          )}
+        </Button>
       )}
       {totalCount >= MAX_PER_PAGE &&
         page < Math.ceil(totalCount / MAX_PER_PAGE) && (
-          <Link href={{ query: { ...searchParams, p: page + 1 } }}>
-            <Button className="btn-wide hover:bg-primary-btn-hover-gradient hover:text-hacktoberfest-dark-green">
-              <span className="mr-2">Next Page</span>
-              <ArrowRight />
-            </Button>
-          </Link>
+          <Button
+            onClick={() => changePage(1)}
+            disabled={isPending}
+            className="btn-wide hover:bg-primary-btn-hover-gradient hover:text-hacktoberfest-dark-green disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isPending ? (
+              <>
+                <span className="mr-2">Loading...</span>
+                <Loader2 className="animate-spin" />
+              </>
+            ) : (
+              <>
+                <span className="mr-2">Next Page</span>
+                <ArrowRight />
+              </>
+            )}
+          </Button>
         )}
     </div>
   );