{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination9",
  "title": "Pagination",
  "description": "Pagination built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/pagination/9/index.tsx",
      "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport { usePagination } from \"@/hooks/use-pagination\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink\n} from \"@/components/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue\n} from \"@/components/ui/select\";\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,\n    totalPages\n  });\n\n  return (\n    <div className=\"flex items-center w-full justify-between gap-3\">\n      {/* Page number information */}\n      <p aria-live=\"polite\" className=\"text-muted-foreground flex-1 text-sm whitespace-nowrap\">\n        Page <span className=\"text-foreground\">{currentPage}</span> of{\" \"}\n        <span className=\"text-foreground\">{totalPages}</span>\n      </p>\n\n      {/* Pagination */}\n      <div className=\"grow\">\n        <Pagination>\n          <PaginationContent>\n            {/* Previous page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === 1 ? true : undefined}\n                aria-label=\"Go to previous page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\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>\n                <PaginationEllipsis />\n              </PaginationItem>\n            )}\n\n            {/* Page number links */}\n            {pages.map((page) => (\n              <PaginationItem key={page}>\n                <PaginationLink href={`#/page/${page}`} isActive={page === currentPage}>\n                  {page}\n                </PaginationLink>\n              </PaginationItem>\n            ))}\n\n            {/* Right ellipsis (...) */}\n            {showRightEllipsis && (\n              <PaginationItem>\n                <PaginationEllipsis />\n              </PaginationItem>\n            )}\n\n            {/* Next page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === totalPages ? true : undefined}\n                aria-label=\"Go to next page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\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      </div>\n\n      {/* Results per page */}\n      <div className=\"flex flex-1 justify-end\">\n        <Select aria-label=\"Results per page\" defaultValue=\"10\">\n          <SelectTrigger className=\"w-fit whitespace-nowrap\" id=\"results-per-page\">\n            <SelectValue placeholder=\"Select number of results\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"10\">10 / page</SelectItem>\n            <SelectItem value=\"20\">20 / page</SelectItem>\n            <SelectItem value=\"50\">50 / page</SelectItem>\n            <SelectItem value=\"100\">100 / page</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pagination9.tsx"
    }
  ],
  "type": "registry:component"
}