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

thoughts-frontend/app/page.tsx

@@ -18,13 +18,7 @@ import { buildThoughtThreads } from "@/lib/utils";
 import { TopFriends } from "@/components/top-friends";
 import { UsersCount } from "@/components/users-count";
 
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
+import { PaginationNav } from "@/components/pagination-nav";
 import { redirect } from "next/navigation";
 
 export const metadata: Metadata = {
@@ -127,24 +121,11 @@ async function FeedPage({
               </p>
             )}
           </div>
-          {totalPages > 1 && (
-          <Pagination className="mt-8">
-            <PaginationContent>
-              <PaginationItem>
-                <PaginationPrevious
-                  href={page > 1 ? `/?page=${page - 1}` : "#"}
-                  aria-disabled={page <= 1}
-                />
-              </PaginationItem>
-              <PaginationItem>
-                <PaginationNext
-                  href={page < totalPages ? `/?page=${page + 1}` : "#"}
-                  aria-disabled={page >= totalPages}
-                />
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-          )}
+          <PaginationNav
+            page={page}
+            totalPages={totalPages}
+            buildHref={(p) => `/?page=${p}`}
+          />
         </main>
 
         <aside className="hidden lg:block lg:col-span-1">