feat(frontend): proper pagination with page numbers and ellipsis

thoughts-frontend/app/users/all/page.tsx

@@ -1,12 +1,6 @@
 import { getAllUsers } from "@/lib/api";
 import { UserListCard } from "@/components/user-list-card";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
+import { PaginationNav } from "@/components/pagination-nav";
 
 export default async function AllUsersPage({
   searchParams,
@@ -29,8 +23,7 @@ export default async function AllUsersPage({
   }
 
   const { items, total, per_page } = usersData;
-  const perPage = per_page;
-  const totalPages = Math.ceil(total / perPage);
+  const totalPages = Math.ceil(total / per_page);
 
   return (
     <div className="container mx-auto max-w-2xl p-4 sm:p-6">
@@ -42,24 +35,11 @@ export default async function AllUsersPage({
       </header>
       <main>
         <UserListCard users={items} />
-        {totalPages > 1 && (
-          <Pagination className="mt-8">
-            <PaginationContent>
-              <PaginationItem>
-                <PaginationPrevious
-                  href={page > 1 ? `/users/all?page=${page - 1}` : "#"}
-                  aria-disabled={page <= 1}
-                />
-              </PaginationItem>
-              <PaginationItem>
-                <PaginationNext
-                  href={page < totalPages ? `/users/all?page=${page + 1}` : "#"}
-                  aria-disabled={page >= totalPages}
-                />
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-        )}
+        <PaginationNav
+          page={page}
+          totalPages={totalPages}
+          buildHref={(p) => `/users/all?page=${p}`}
+        />
       </main>
     </div>
   );