cosscom__coss/apps/ui/public/r/particle-pa-2.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "particle-pa-2",
  "type": "registry:block",
  "description": "Pagination with select, and previous and next buttons",
  "registryDependencies": ["@coss/pagination", "@coss/select"],
  "files": [
    {
      "path": "registry/default/particles/particle-pa-2.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\"\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\ntype PaginationProps = {\n  currentPage?: number\n  totalPages?: number\n  totalResults: number\n  resultsPerPage?: number\n}\n\nexport default function Particle({\n  currentPage: initialPage = 1,\n  totalPages = 10,\n  totalResults,\n  resultsPerPage = 10,\n}: PaginationProps) {\n  const [currentPage, setCurrentPage] = React.useState(initialPage)\n  const resultRanges = Array.from({ length: totalPages }, (_, i) => {\n    const start = i * resultsPerPage + 1\n    const end = Math.min((i + 1) * resultsPerPage, totalResults)\n    const pageNum = i + 1\n    return { label: `${start}-${end}`, value: pageNum }\n  })\n\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      {/* Results range selector */}\n      <div className=\"flex items-center gap-2 whitespace-nowrap\">\n        <p className=\"text-sm text-muted-foreground\">Viewing</p>\n        <Select\n          value={currentPage}\n          onValueChange={(value) => setCurrentPage(value as number)}\n          items={resultRanges}\n        >\n          <SelectTrigger\n            className=\"min-w-none w-fit\"\n            size=\"sm\"\n            aria-label=\"Select result range\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            {resultRanges.map(({ label, value }) => (\n              <SelectItem key={value} value={value}>\n                {label}\n              </SelectItem>\n            ))}\n          </SelectPopup>\n        </Select>\n        <p className=\"text-sm text-muted-foreground\">\n          of{\" \"}\n          <strong className=\"font-medium text-foreground\">\n            {totalResults}\n          </strong>{\" \"}\n          results\n        </p>\n      </div>\n\n      {/* Pagination */}\n      <div>\n        <Pagination>\n          <PaginationContent className=\"w-full justify-between gap-2\">\n            <PaginationItem>\n              <PaginationPrevious\n                className=\"sm:*:[svg]:hidden\"\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    disabled={currentPage === 1 ? true : undefined}\n                    onClick={() =>\n                      currentPage > 1 && setCurrentPage(currentPage - 1)\n                    }\n                  />\n                }\n              />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext\n                className=\"sm:*:[svg]:hidden\"\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    disabled={currentPage === totalPages ? true : undefined}\n                    onClick={() =>\n                      currentPage < totalPages &&\n                      setCurrentPage(currentPage + 1)\n                    }\n                  />\n                }\n              />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": ["pagination", "select"]
}