pagination-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination-example",
  "title": "Pagination",
  "registryDependencies": [
    "field",
    "pagination",
    "select",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-vega/examples/pagination-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Field, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/radix-vega/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\n\nexport default function PaginationExample() {\n  return (\n    <ExampleWrapper>\n      <PaginationBasic />\n      <PaginationSimple />\n      <PaginationIconsOnly />\n    </ExampleWrapper>\n  )\n}\n\nfunction PaginationBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious href=\"#\" />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationNext href=\"#\" />\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">4</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">5</PaginationLink>\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationIconsOnly() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <Field orientation=\"horizontal\" className=\"w-fit\">\n          <FieldLabel htmlFor=\"select-rows-per-page\">Rows per page</FieldLabel>\n          <Select defaultValue=\"25\">\n            <SelectTrigger className=\"w-20\" id=\"select-rows-per-page\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"10\">10</SelectItem>\n                <SelectItem value=\"25\">25</SelectItem>\n                <SelectItem value=\"50\">50</SelectItem>\n                <SelectItem value=\"100\">100</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Pagination className=\"mx-0 w-auto\">\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext href=\"#\" />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}