{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination8",
  "title": "Pagination",
  "description": "Pagination built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/pagination/8/index.tsx",
      "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport { usePagination } from \"@/hooks/use-pagination\";\nimport { cn } from \"@/lib/utils\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink\n} from \"@/components/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  paginationItemsToDisplay?: number;\n};\n\nexport default function PaginationComponent() {\n  return <PaginationRender currentPage={1} totalPages={10} paginationItemsToDisplay={5} />;\n}\n\nfunction PaginationRender({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay = 5\n}: PaginationProps) {\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage,\n    paginationItemsToDisplay: paginationItemsToDisplay ?? 5,\n    totalPages\n  });\n\n  return (\n    <Pagination>\n      <PaginationContent className=\"inline-flex gap-0 -space-x-px rounded-md shadow-xs rtl:space-x-reverse\">\n        {/* Previous page button */}\n        <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n          <PaginationLink\n            aria-disabled={currentPage === 1 ? true : undefined}\n            aria-label=\"Go to previous page\"\n            className={cn(\n              buttonVariants({\n                variant: \"outline\"\n              }),\n              \"rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50\"\n            )}\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            role={currentPage === 1 ? \"link\" : undefined}>\n            <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Left ellipsis (...) */}\n        {showLeftEllipsis && (\n          <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Page number links */}\n        {pages.map((page) => (\n          <PaginationItem key={page}>\n            <PaginationLink\n              className={cn(\n                buttonVariants({\n                  variant: \"outline\"\n                }),\n                \"rounded-none shadow-none focus-visible:z-10\",\n                page === currentPage && \"bg-accent\"\n              )}\n              href={`#/page/${page}`}\n              isActive={page === currentPage}>\n              {page}\n            </PaginationLink>\n          </PaginationItem>\n        ))}\n\n        {/* Right ellipsis (...) */}\n        {showRightEllipsis && (\n          <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n            <PaginationEllipsis\n              className={cn(\n                buttonVariants({\n                  variant: \"outline\"\n                }),\n                \"pointer-events-none rounded-none shadow-none\"\n              )}\n            />\n          </PaginationItem>\n        )}\n\n        {/* Next page button */}\n        <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n          <PaginationLink\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            aria-label=\"Go to next page\"\n            className={cn(\n              buttonVariants({\n                variant: \"outline\"\n              }),\n              \"rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50\"\n            )}\n            href={currentPage === totalPages ? undefined : `#/page/${currentPage + 1}`}\n            role={currentPage === totalPages ? \"link\" : undefined}>\n            <ChevronRightIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pagination8.tsx"
    }
  ],
  "type": "registry:component"
}