mirror change from https://github.com/binhkid2/FullStack-Blog-Nestjs-Nextjs-Postgres

frontend/components/pagination.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface PaginationProps {
+  page: number;
+  totalPages: number;
+  total: number;
+}
+
+export function Pagination({ page, totalPages, total }: PaginationProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  if (totalPages <= 1) return null;
+
+  const goToPage = (p: number) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("page", String(p));
+    router.push(`?${params.toString()}`);
+  };
+
+  // Show at most 5 page numbers
+  const getPageNumbers = () => {
+    const pages: number[] = [];
+    const start = Math.max(1, page - 2);
+    const end = Math.min(totalPages, start + 4);
+    for (let i = start; i <= end; i++) pages.push(i);
+    return pages;
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 pt-4 border-t">
+      <p className="text-sm text-muted-foreground">
+        Page {page} of {totalPages} ({total} posts)
+      </p>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={page <= 1}
+          onClick={() => goToPage(page - 1)}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+
+        {getPageNumbers().map((p) => (
+          <Button
+            key={p}
+            variant={p === page ? "default" : "outline"}
+            size="sm"
+            onClick={() => goToPage(p)}
+            className="w-9"
+          >
+            {p}
+          </Button>
+        ))}
+
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={page >= totalPages}
+          onClick={() => goToPage(page + 1)}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}