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>