Components
Loading preview...
npx shadcn@latest add https://21st.dev/r/hero_ui/the-pagination"use client";
import {Pagination} from "@heroui/react";
import {useState} from "react";
export default function PaginationWithSummary() {
const [page, setPage] = useState(1);
const totalPages = 12;
const itemsPerPage = 10;
const totalItems = 120;
const getPageNumbers = () => {
const pages: (number | "ellipsis")[] = [];
pages.push(1);
if (page > 3) {
pages.push("ellipsis");
}
const start = Math.max(2, page - 1);
const end = Math.min(totalPages - 1, page + 1);
for (let i = start; i <= end; i++) {
pages.push(i);
}
if (page < totalPages - 2) {
pages.push("ellipsis");
}
pages.push(totalPages);
return pages;
};
const startItem = (page - 1) * itemsPerPage + 1;
const endItem = Math.min(page * itemsPerPage, totalItems);
return (
<Pagination className="w-full">
<Pagination.Summary>
Showing {startItem}-{endItem} of {totalItems} results
</Pagination.Summary>
<Pagination.Content>
<Pagination.Item>
<Pagination.Previous isDisabled={page === 1} onPress={() => setPage((p) => p - 1)}>
<Pagination.PreviousIcon />
<span>Previous</span>
</Pagination.Previous>
</Pagination.Item>
{getPageNumbers().map((p, i) =>
p === "ellipsis" ? (
<Pagination.Item key={`ellipsis-${i}`}>
<Pagination.Ellipsis />
</Pagination.Item>
) : (
<Pagination.Item key={p}>
<Pagination.Link isActive={p === page} onPress={() => setPage(p)}>
{p}
</Pagination.Link>
</Pagination.Item>
),
)}
<Pagination.Item>
<Pagination.Next isDisabled={page === totalPages} onPress={() => setPage((p) => p + 1)}>
<span>Next</span>
<Pagination.NextIcon />
</Pagination.Next>
</Pagination.Item>
</Pagination.Content>
</Pagination>
);
}