A page-number navigation with previous/next arrows and an ellipsis for long lists, plus a helper that works out which page numbers to show.
"use client";
import * as React from "react";
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
getPaginationRange,
} from "@/components/ui/pagination";
export default function PaginationDemo() {
const [page, setPage] = React.useState(1);
const pageCount = 12;
const entries = getPaginationRange({ page: page, pageCount: pageCount });
return (
<div className="flex w-full flex-col items-center gap-4">
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious
href={page > 1 ? "#" : undefined}
aria-disabled={page <= 1}
onClick={(e) => {
e.preventDefault();
if (page > 1) setPage((p) => p - 1);
}}
/>
</PaginationItem>
{entries.map((entry, index) =>
entry === "ellipsis" ? (
<PaginationItem key={`ellipsis-${index}`}>
<PaginationEllipsis />
</PaginationItem>
) : (
<PaginationItem key={entry}>
<PaginationLink
href="#"
isActive={entry === page}
onClick={(e) => {
e.preventDefault();
setPage(entry);
}}
>
{entry}
</PaginationLink>
</PaginationItem>
),
)}
<PaginationItem>
<PaginationNext
href={page < pageCount ? "#" : undefined}
aria-disabled={page >= pageCount}
onClick={(e) => {
e.preventDefault();
if (page < pageCount) setPage((p) => p + 1);
}}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
<p className="text-sm text-muted-foreground">
Page {page} of {pageCount}
</p>
</div>
);
}