{
  "name": "review-04-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\";\n\ninterface RatingItemProps {\n  label: string;\n  value: number;\n  isLast?: boolean;\n}\n\ninterface RatingItemData {\n  label: string;\n  value: number;\n}\n\ninterface Review_04Props {\n  title?: string;\n  overallRating?: number;\n  recommendPercentage?: number;\n  ratingItems?: RatingItemData[];\n}\n\nfunction RatingItem({ isLast, label, value }: RatingItemProps) {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <p className=\"text-sm tracking-wider uppercase\">\n        <span className=\"mr-2 font-semibold\">{value}/5</span> {label}\n      </p>\n      <StarRating value={value} readOnly iconSize={16} />\n      {!isLast && (\n        <hr className=\"my-2 block border-t border-gray-500/50 md:hidden\" />\n      )}\n    </div>\n  );\n}\n\nfunction Review_04({\n  overallRating = 4.4,\n  ratingItems = [\n    { label: \"Quality\", value: 4.5 },\n    { label: \"Value\", value: 4.5 },\n    { label: \"Appearance\", value: 4.5 },\n    { label: \"Effectiveness\", value: 4.5 },\n    { label: \"Features\", value: 4.1 },\n    { label: \"Quietness\", value: 4.4 },\n  ],\n  recommendPercentage = 87,\n  title = \"Customer Reviews\",\n}: Review_04Props = {}) {\n  return (\n    <div className=\"items-left flex flex-col gap-6 px-6 py-4\">\n      <h1 className=\"mb-4 text-left text-2xl font-semibold\">{title}</h1>\n      <div className=\"flex flex-row flex-wrap gap-12\">\n        <div className=\"flex grow-0 flex-col justify-around gap-2\">\n          <p className=\"text-4xl font-semibold\"> {overallRating}/5</p>\n          <StarRating value={overallRating} readOnly iconSize={36} />\n          <p className=\"text-muted-foreground max-w-[20ch] text-sm\">\n            <span className=\"font-semibold text-teal-500\">\n              {recommendPercentage}% would recommend{\" \"}\n            </span>\n            this product to a friend\n          </p>\n        </div>\n        <div className=\"grid w-fit grid-cols-1 gap-2 md:grid-cols-3\">\n          {ratingItems.map((item, index) => (\n            <RatingItem\n              key={item.label}\n              label={item.label}\n              value={item.value}\n              isLast={index === ratingItems.length - 1}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Review_04;\nexport type { RatingItemData, RatingItemProps, Review_04Props };\n",
      "path": "/components/commerce-ui/blocks/reviews/review-04.tsx",
      "target": "components/commerce-ui/review-04.tsx"
    }
  ]
}