{
  "name": "review-05-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.stackzero.co/r/star-rating-fractions.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "import StarRating from \"@/components/commerce-ui/star-rating-fractions\";\nimport { Progress } from \"@/components/ui/progress\";\n\ninterface ReviewStatProps {\n  stars: number;\n  percentage: number;\n  count: number;\n}\n\ninterface ReviewStatData {\n  stars: number;\n  percentage: number;\n  count: number;\n}\n\ninterface Review_05Props {\n  title?: string;\n  subtitle?: string;\n  overallRating?: number;\n  totalReviewCount?: number;\n  verifiedPurchases?: number;\n  reviewStats?: ReviewStatData[];\n  showProgress?: boolean;\n}\n\nfunction ReviewStat({ count, percentage, stars }: ReviewStatProps) {\n  return (\n    <div className=\"flex w-full items-center gap-2\">\n      <div className=\"w-16 text-right text-sm\">{stars} stars</div>\n      <Progress value={percentage} className=\"h-2 flex-1\" />\n      <div className=\"text-muted-foreground w-12 text-left text-sm\">\n        {count}\n      </div>\n    </div>\n  );\n}\n\nfunction Review_05({\n  overallRating = 4.7,\n  reviewStats = [\n    { count: 629, percentage: 76, stars: 5 },\n    { count: 116, percentage: 14, stars: 4 },\n    { count: 50, percentage: 6, stars: 3 },\n    { count: 24, percentage: 3, stars: 2 },\n    { count: 8, percentage: 1, stars: 1 },\n  ],\n  showProgress = true,\n  subtitle = \"What our customers are saying\",\n  title = \"Customer Reviews\",\n  totalReviewCount = 827,\n  verifiedPurchases = 756,\n}: Review_05Props = {}) {\n  const verifiedPercentage = Math.round(\n    (verifiedPurchases / totalReviewCount) * 100\n  );\n\n  return (\n    <div className=\"flex flex-col gap-8 rounded-lg bg-white px-6 py-6 dark:bg-gray-950\">\n      <div className=\"flex flex-col items-center text-center\">\n        <h2 className=\"mb-1 text-2xl font-bold\">{title}</h2>\n        <p className=\"text-muted-foreground mb-6 text-sm\">{subtitle}</p>\n\n        <div className=\"mb-4 flex flex-col items-center\">\n          <span className=\"mb-2 text-5xl font-bold\">{overallRating}</span>\n          <StarRating\n            value={overallRating}\n            readOnly\n            iconSize={24}\n            className=\"mb-2\"\n          />\n          <p className=\"text-muted-foreground text-sm\">\n            Based on {totalReviewCount} reviews\n          </p>\n        </div>\n\n        <div className=\"mb-2 w-full max-w-xs rounded-md bg-gray-50 px-4 py-3 dark:bg-gray-900\">\n          <p className=\"text-sm\">\n            <span className=\"font-medium\">{verifiedPercentage}%</span> of\n            reviews from{\" \"}\n            <span className=\"font-medium text-green-600 dark:text-green-400\">\n              verified purchases\n            </span>\n          </p>\n        </div>\n      </div>\n\n      {showProgress && (\n        <div className=\"mx-auto w-full max-w-md space-y-2\">\n          {reviewStats.map((stat) => (\n            <ReviewStat\n              key={stat.stars}\n              stars={stat.stars}\n              percentage={stat.percentage}\n              count={stat.count}\n            />\n          ))}\n        </div>\n      )}\n\n      <div className=\"flex flex-col gap-3 text-center\">\n        <p className=\"text-sm\">\n          <span className=\"font-medium\">Top Keywords:</span>{\" \"}\n          <span className=\"text-muted-foreground\">\n            quality, easy to use, value, fast shipping, comfortable\n          </span>\n        </p>\n        <button className=\"mx-auto w-full max-w-xs rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700\">\n          Write a Review\n        </button>\n      </div>\n    </div>\n  );\n}\n\nexport default Review_05;\nexport type { ReviewStatData, ReviewStatProps, Review_05Props };\n",
      "path": "/components/commerce-ui/blocks/reviews/review-05.tsx",
      "target": "components/commerce-ui/review-05.tsx"
    }
  ]
}