{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-pagination-12","type":"registry:block","title":"Rows per page select with range info and first/prev/next/last icons","description":"Rows per page select with range info and first/prev/next/last icons","dependencies":[],"registryDependencies":["native-select","pagination"],"files":[{"path":"c-pagination-12.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 className=\"w-full justify-between\">\n        <PaginationItem className=\"flex items-center gap-2\">\n          <span className=\"text-muted-foreground text-sm whitespace-nowrap\">\n            Rows per page\n          </span>\n          <NativeSelect className=\"w-18\" defaultValue=\"25\">\n            <NativeSelectOption value=\"10\">10</NativeSelectOption>\n            <NativeSelectOption value=\"25\">25</NativeSelectOption>\n            <NativeSelectOption value=\"50\">50</NativeSelectOption>\n            <NativeSelectOption value=\"100\">100</NativeSelectOption>\n          </NativeSelect>\n        </PaginationItem>\n        <PaginationItem className=\"flex items-center gap-3\">\n          <span className=\"text-muted-foreground text-sm whitespace-nowrap\">\n            1-25 of 100\n          </span>\n          <div className=\"flex gap-1\">\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            <PaginationLink\n              href=\"#\"\n              size=\"icon\"\n              aria-label=\"Go to previous page\"\n            >\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            <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            <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          </div>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}","target":"components/examples/c-pagination-12.tsx"}],"meta":{"order":12}}