pagination/usage

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Pagination basic usage example

Example of basic pagination usage: import Pagination components, then render <Pagination> containing <PaginationContent> with <PaginationItem> children. Each item wraps a component like <PaginationPrevious href="#" />, <PaginationLink href="#">1</PaginationLink>, <PaginationLink href="#" isActive>2</PaginationLink>, <PaginationLink href="#">3</PaginationLink>, <PaginationEllipsis />, and <PaginationNext href="#" />.

PaginationNext implementation with text prop

The PaginationNext component implementation includes a text prop parameter with default value 'Next', and renders a span element with the class 'cn-pagination-next-text hidden sm:block' containing the text, followed by the ChevronRightIcon. The span is hidden on small screens and visible on medium screens and above.

PaginationPrevious implementation with text prop

The PaginationPrevious component implementation includes a text prop parameter with default value 'Previous', and renders the ChevronLeftIcon followed by a span element with the class 'cn-pagination-previous-text hidden sm:block' containing the text. The span is hidden on small screens and visible on medium screens and above.

Pagination component basic usage example

Basic pagination example with previous button, numbered links (1, 2, 3), ellipsis, and next button: ```tsx import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" <Pagination> <PaginationContent> <PaginationItem> <PaginationPrevious href="#" /> </PaginationItem> <PaginationItem> <PaginationLink href="#">1</PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#" isActive> 2 </PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#">3</PaginationLink> </PaginationItem> <PaginationItem> <PaginationEllipsis /> </PaginationItem> <PaginationItem> <PaginationNext href="#" /> </PaginationItem> </PaginationContent> </Pagination> ```

Pagination component imports

The Pagination component requires importing the following from @/components/ui/pagination: Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, and PaginationPrevious.

Pagination basic usage example

Basic pagination example with page numbers and navigation: ```tsx <Pagination> <PaginationContent> <PaginationItem> <PaginationPrevious href="#" /> </PaginationItem> <PaginationItem> <PaginationLink href="#">1</PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#" isActive> 2 </PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#">3</PaginationLink> </PaginationItem> <PaginationItem> <PaginationEllipsis /> </PaginationItem> <PaginationItem> <PaginationNext href="#" /> </PaginationItem> </PaginationContent> </Pagination> ```

Pagination with Next.js

By default, PaginationLink renders an <a> tag. To use Next.js Link component, update the type PaginationLinkProps to use React.ComponentProps<typeof Link> instead of React.ComponentProps<"a">, and replace the <a> tag with <Link> in the component. The cli is being updated to do this automatically.

Give your agent this brain