{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination-08",
  "title": "Tabs Pagination",
  "description": "A pagination component with tabs styling",
  "registryDependencies": [
    "pagination",
    "button"
  ],
  "files": [
    {
      "path": "src/components/customized/pagination/pagination-08.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { buttonVariants } from \"@/registry/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/ui/pagination\";\n\nconst pages = [1, 2, 3];\n\nexport default function PaginationTabs() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious className=\"border\" href=\"#\" />\n        </PaginationItem>\n\n        {pages.map((page) => {\n          const isActive = page === 2;\n\n          return (\n            <PaginationItem key={page}>\n              <PaginationLink\n                className={cn({\n                  [buttonVariants({\n                    variant: \"default\",\n                    className:\n                      \"shadow-none! hover:text-primary-foreground! dark:bg-primary dark:hover:bg-primary/90\",\n                  })]: isActive,\n                  border: !isActive,\n                })}\n                href={`#${page}`}\n                isActive={page === 2}\n              >\n                {page}\n              </PaginationLink>\n            </PaginationItem>\n          );\n        })}\n\n        <PaginationItem>\n          <PaginationNext className=\"border\" href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}