{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ratings-star-summary",
  "title": "Ratings — Star Summary",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/ratings-star-summary/RatingsStarSummary.tsx",
      "content": "'use client'\n\nimport { Star } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\n\nconst score = 4.7\nconst total = 2117\n\nconst distribution = [\n  { stars: 5, count: 1587 },\n  { stars: 4, count: 381 },\n  { stars: 3, count: 97 },\n  { stars: 2, count: 31 },\n  { stars: 1, count: 21 },\n]\n\nconst STAR_SLOTS = [1, 2, 3, 4, 5]\n/** Fill percentage for one slot, so 4.7 draws a real partial star. */\nfunction fillFor(slot: number) {\n  return `${Math.min(Math.max(score - (slot - 1), 0), 1) * 100}%`\n}\n\nexport function RatingsStarSummary() {\n  return (\n    <section data-slot=\"ratings-star-summary\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <Badge variant=\"secondary\">Reviews</Badge>\n        <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">\n          What {total.toLocaleString()} people say\n        </h2>\n\n        <Card className=\"mt-8\">\n          <CardContent className=\"grid gap-8 p-6 sm:grid-cols-[auto_1fr] sm:gap-12 sm:p-8\">\n            <div className=\"text-center sm:text-left\">\n              <p className=\"font-display text-5xl font-bold tracking-tight\">{score.toFixed(1)}</p>\n              <div\n                className=\"mt-2 flex items-center justify-center gap-0.5 sm:justify-start\"\n                role=\"img\"\n                aria-label={`${score} out of 5`}\n              >\n                {STAR_SLOTS.map((slot) => (\n                  <span key={slot} className=\"relative inline-flex\">\n                    <Star className=\"text-muted-foreground/30 size-4\" aria-hidden=\"true\" />\n                    <span\n                      className=\"absolute inset-y-0 left-0 overflow-hidden\"\n                      style={{ width: fillFor(slot) }}\n                      aria-hidden=\"true\"\n                    >\n                      <Star className=\"fill-primary text-primary size-4\" />\n                    </span>\n                  </span>\n                ))}\n              </div>\n              <p className=\"text-muted-foreground mt-2 text-xs\">{total.toLocaleString()} verified reviews</p>\n            </div>\n\n            <Separator orientation=\"vertical\" className=\"hidden h-auto sm:block\" />\n\n            <dl className=\"space-y-2.5\">\n              {distribution.map((row) => (\n                <div key={row.stars} className=\"flex items-center gap-4\">\n                  <dt className=\"text-muted-foreground w-12 shrink-0 font-mono text-xs\">{row.stars} star</dt>\n                  <dd className=\"flex min-w-0 grow items-center gap-4\">\n                    <Progress\n                      value={Math.round((row.count / total) * 100)}\n                      className=\"h-1.5\"\n                      aria-label={`${row.stars} star reviews`}\n                    />\n                    <span className=\"text-muted-foreground w-12 shrink-0 text-right font-mono text-xs\">\n                      {row.count.toLocaleString()}\n                    </span>\n                  </dd>\n                </div>\n              ))}\n            </dl>\n          </CardContent>\n        </Card>\n\n        <div className=\"mt-6 flex flex-wrap items-center gap-4\">\n          <Button variant=\"outline\">Read the one-star reviews</Button>\n          <p className=\"text-muted-foreground text-sm\">They are the useful ones, and we have not hidden them.</p>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/RatingsStarSummary.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Aggregate rating summary pairing a large score and partial-star row with a per-star distribution and the review count each bar represents.",
  "categories": [
    "marketing"
  ]
}