{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pdp-rating-row",
  "type": "registry:component",
  "title": "Rating row",
  "description": "Stars, average, review count and one short verified quote under the title, linking to the reviews section.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "pdp",
    "any"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json",
    "https://storekit-eight.vercel.app/r/stars.json",
    "https://storekit-eight.vercel.app/r/sk-analytics.json"
  ],
  "files": [
    {
      "path": "pdp/pdp-rating-row.tsx",
      "content": "\"use client\"\n\nimport { BadgeCheck } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { Stars } from \"@/components/storekit/ui/stars\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Above-the-fold social proof that sits under the product title: stars,\n   average, review count and one short verified quote. The whole row links\n   to the reviews section so the proof is one tap from the full evidence. */\n\ntype Quote = { text: string; author: string; verified?: boolean }\n\nexport function PdpRatingRow({\n  rating = 4.8,\n  count = 1284,\n  quote = { text: \"Mixes clean, tastes great, and I actually look forward to it.\", author: \"Dana R.\", verified: true },\n  href = \"#reviews\",\n  className,\n}: {\n  rating?: number\n  count?: number\n  quote?: Quote | null\n  /** Anchor or URL of the full reviews section. */\n  href?: string\n  className?: string\n}) {\n  const sk = useSkBlock(\"pdp\", \"pdp-rating-row\")\n  const jump = (label: string) => sk.emit(\"interact\", label, undefined)\n\n  return (\n    <div {...sk.attrs} ref={sk.ref as React.RefObject<HTMLDivElement>} className={cn(\"flex w-full flex-col gap-1.5\", className)}>\n      <a\n        href={href}\n        onClick={() => jump(\"reviews_jump\")}\n        aria-label={`Rated ${rating.toFixed(1)} out of 5 from ${count.toLocaleString(\"en-US\")} reviews. Read reviews`}\n        className=\"group/rr -mx-1 inline-flex min-h-[44px] w-fit flex-wrap items-center gap-x-2 gap-y-1 rounded-sk-btn px-1 outline-none transition-transform duration-200 ease-sk-out focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97]\"\n      >\n        <Stars value={rating} size={15} />\n        <span className=\"text-sm font-semibold tabular-nums text-sk-ink\">{rating.toFixed(1)}</span>\n        <span aria-hidden className=\"h-3 w-px bg-sk-line\" />\n        <span className=\"text-sm tabular-nums text-sk-muted underline decoration-sk-line underline-offset-4 transition-colors duration-200 group-hover/rr:text-sk-ink group-hover/rr:decoration-sk-ink/40\">\n          {count.toLocaleString(\"en-US\")} reviews\n        </span>\n      </a>\n      {quote ? (\n        <figure className=\"flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5 text-sm leading-[1.5]\">\n          <blockquote className=\"min-w-0 text-sk-ink\">\n            <p>&ldquo;{quote.text}&rdquo;</p>\n          </blockquote>\n          <figcaption className=\"inline-flex items-center gap-1 text-[13px] text-sk-muted\">\n            {quote.author}\n            {quote.verified ? (\n              <>\n                <BadgeCheck size={13} aria-hidden className=\"text-sk-savings\" />\n                <span className=\"sr-only\">, verified buyer</span>\n              </>\n            ) : null}\n          </figcaption>\n        </figure>\n      ) : null}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/storekit/pdp/pdp-rating-row.tsx"
    }
  ],
  "meta": {
    "section": "pdp",
    "variant": "rating",
    "niche": [
      "any"
    ],
    "commerce": [
      "reviews"
    ],
    "previewHeight": 240
  }
}