{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-pagination-13","type":"registry:block","title":"Pagination with page select dropdown and first/last navigation","description":"Pagination with page select dropdown and first/last navigation","dependencies":[],"registryDependencies":["native-select","pagination"],"files":[{"path":"c-pagination-13.tsx","type":"registry:block","content":"import {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/components/ui/native-select\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n} from \"@/components/ui/pagination\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationLink href=\"#\" size=\"icon\" aria-label=\"Go to first page\">\n            <IconPlaceholder\n              lucide=\"ChevronFirstIcon\"\n              tabler=\"IconChevronLeftPipe\"\n              hugeicons=\"ArrowLeft03Icon\"\n              phosphor=\"CaretLineLeftIcon\"\n              remixicon=\"RiSkipLeftLine\"\n              className=\"size-4\"\n            />\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" size=\"icon\" aria-label=\"Go to previous page\">\n            <IconPlaceholder\n              lucide=\"ChevronLeftIcon\"\n              tabler=\"IconChevronLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"CaretLeftIcon\"\n              remixicon=\"RiArrowLeftSLine\"\n              className=\"size-4\"\n            />\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <NativeSelect className=\"w-26\" defaultValue=\"1\">\n            <NativeSelectOption value=\"1\">Page 1</NativeSelectOption>\n            <NativeSelectOption value=\"2\">Page 2</NativeSelectOption>\n            <NativeSelectOption value=\"3\">Page 3</NativeSelectOption>\n            <NativeSelectOption value=\"4\">Page 4</NativeSelectOption>\n            <NativeSelectOption value=\"5\">Page 5</NativeSelectOption>\n            <NativeSelectOption value=\"6\">Page 6</NativeSelectOption>\n            <NativeSelectOption value=\"7\">Page 7</NativeSelectOption>\n            <NativeSelectOption value=\"8\">Page 8</NativeSelectOption>\n            <NativeSelectOption value=\"9\">Page 9</NativeSelectOption>\n            <NativeSelectOption value=\"10\">Page 10</NativeSelectOption>\n          </NativeSelect>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" size=\"icon\" aria-label=\"Go to next page\">\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"size-4\"\n            />\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" size=\"icon\" aria-label=\"Go to last page\">\n            <IconPlaceholder\n              lucide=\"ChevronLastIcon\"\n              tabler=\"IconChevronRightPipe\"\n              hugeicons=\"ArrowRight03Icon\"\n              phosphor=\"CaretLineRightIcon\"\n              remixicon=\"RiSkipRightLine\"\n              className=\"size-4\"\n            />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}","target":"components/examples/c-pagination-13.tsx"}],"meta":{"order":13}}