{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-rating-6","type":"registry:block","title":"Rating with review summary","description":"Rating with review summary","dependencies":[],"registryDependencies":["progress","@reui/rating","separator"],"files":[{"path":"c-rating-6.tsx","type":"registry:block","content":"import { Rating } from \"@/components/reui/rating\"\n\nimport { Progress } from \"@/components/ui/progress\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst distribution = [\n  { stars: 5, count: 124, percentage: 62 },\n  { stars: 4, count: 45, percentage: 22 },\n  { stars: 3, count: 18, percentage: 9 },\n  { stars: 2, count: 8, percentage: 4 },\n  { stars: 1, count: 5, percentage: 3 },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto w-full max-w-xs space-y-4\">\n      <div className=\"flex flex-col items-center gap-2\">\n        <span className=\"text-3xl font-semibold\">4.6</span>\n        <Rating rating={4.6} size=\"sm\" />\n        <span className=\"text-muted-foreground text-xs\">\n          Based on 200 reviews\n        </span>\n      </div>\n      <Separator />\n      <div className=\"space-y-2\">\n        {distribution.map((row) => (\n          <div key={row.stars} className=\"flex items-center gap-3 text-sm\">\n            <span className=\"text-muted-foreground w-3 text-right text-xs\">\n              {row.stars}\n            </span>\n            <Progress\n              value={row.percentage}\n              className=\"flex-1 **:data-[slot=progress-indicator]:bg-yellow-400 **:data-[slot=progress-track]:h-1.5\"\n            />\n            <span className=\"text-muted-foreground w-7 text-right text-xs\">\n              {row.count}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}","target":"components/examples/c-rating-6.tsx"}],"meta":{"order":6}}