Pagination

import {
 SimplePagination,
 FullPagination,
 // Or primitives for custom layouts:
 Pagination,
 PaginationContent,
 PaginationItem,
 PaginationLink,
 PaginationPrevious,
 PaginationNext,
 PaginationEllipsis,
} from '@/components/ui/pagination'

// Simple prev/next pagination
const [page, setPage] = useState(1)

<SimplePagination
 currentPage={page}
 totalPages={10}
 onPageChange={setPage}
/>

// Full pagination with page numbers
<FullPagination
 currentPage={page}
 totalPages={20}
 onPageChange={setPage}
 siblingCount={1}
/>

// With results info
<FullPagination
 currentPage={page}
 totalPages={15}
 onPageChange={setPage}
 showResults
 totalResults={150}
 resultsPerPage={10}
/>

// Custom layout with primitives
<Pagination>
 <PaginationContent>
 <PaginationItem>
 <PaginationPrevious onClick={() => setPage(p => p - 1)} />
 </PaginationItem>
 {pages.map(p => (
 <PaginationItem key={p}>
 <PaginationLink
 isActive={p === page}
 onClick={() => setPage(p)}
 >
 {p}
 </PaginationLink>
 </PaginationItem>
 ))}
 <PaginationItem>
 <PaginationNext onClick={() => setPage(p => p + 1)} />
 </PaginationItem>
 </PaginationContent>
</Pagination>