{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-pagination-6","type":"registry:block","title":"Numbered pagination in card","description":"Numbered pagination in card","dependencies":[],"registryDependencies":["card","pagination"],"files":[{"path":"c-pagination-6.tsx","type":"registry:block","content":"import { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n} from \"@/components/ui/pagination\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <Card className=\"p-2\">\n      <CardContent className=\"p-0\">\n        <Pagination>\n          <PaginationContent>\n            {/* Previous */}\n            <PaginationItem>\n              <PaginationLink\n                href=\"#\"\n                size=\"icon\"\n                aria-label=\"Go to previous page\"\n                className=\"hover:bg-muted h-8 w-8 rounded-full\"\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            </PaginationItem>\n\n            {[1, 2, 3].map((page) => (\n              <PaginationItem key={page}>\n                <PaginationLink\n                  href=\"#\"\n                  isActive={page === 1}\n                  className={\n                    page === 1\n                      ? \"bg-primary text-primary-foreground hover:bg-primary/90\"\n                      : \"hover:bg-muted\"\n                  }\n                >\n                  {page}\n                </PaginationLink>\n              </PaginationItem>\n            ))}\n\n            <PaginationItem>\n              <PaginationEllipsis />\n            </PaginationItem>\n\n            {[10, 11, 12].map((page) => (\n              <PaginationItem key={page}>\n                <PaginationLink href=\"#\">{page}</PaginationLink>\n              </PaginationItem>\n            ))}\n\n            {/* Next */}\n            <PaginationItem>\n              <PaginationLink\n                href=\"#\"\n                size=\"icon\"\n                aria-label=\"Go to next page\"\n                className=\"hover:bg-muted h-8 w-8 rounded-full\"\n              >\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          </PaginationContent>\n        </Pagination>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-pagination-6.tsx"}],"meta":{"order":6}}