{
  "name": "review-02-block",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/star-rating-fractions.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport StarRating from \"@/components/commerce-ui/star-rating-fractions\";\nimport { Button } from \"@/components/ui/button\";\nimport { Star } from \"lucide-react\";\n\ninterface RatingLevelProps {\n  level: number;\n  value: number;\n  total: number;\n}\n\ninterface RatingData {\n  level: number;\n  value: number;\n  total: number;\n}\n\ninterface Review_02Props {\n  productImageUrl?: string;\n  productName?: string;\n  badgeText?: string;\n  averageRating?: number;\n  totalReviews?: number;\n  ratingLevels?: RatingData[];\n  onReviewClick?: () => void;\n  onSeeAllReviewsClick?: () => void;\n}\n\nfunction Review_02({\n  averageRating = 4.5,\n  badgeText = \"Top rated\",\n  onReviewClick = () => {},\n  onSeeAllReviewsClick = () => {},\n  productImageUrl = \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/backpack.jpg\",\n  productName = \"Ultra Backpack PRO GEAR - 2025 edition\",\n  ratingLevels = [\n    { level: 5, total: 75, value: 75 },\n    { level: 4, total: 20, value: 20 },\n    { level: 3, total: 5, value: 5 },\n    { level: 2, total: 0, value: 0 },\n    { level: 1, total: 0, value: 0 },\n  ],\n  totalReviews = 100,\n}: Review_02Props = {}) {\n  return (\n    <>\n      <div className=\"items-left flex max-w-lg flex-col gap-6 rounded-lg border px-6 py-4\">\n        <div className=\"flex w-full flex-row flex-wrap items-start justify-between gap-4\">\n          <img\n            src={productImageUrl}\n            alt=\"product-image\"\n            className=\"relative inline-block h-36 w-36 items-center rounded-sm object-cover\"\n          />\n\n          <div className=\"flex flex-col gap-4\">\n            <p className=\"text-xl font-semibold\">{productName}</p>\n            {badgeText && (\n              <div className=\"w-fit rounded-xl border border-teal-500/50 bg-teal-500/20 px-2 py-1 uppercase\">\n                <p className=\"text-xs font-semibold text-teal-500\">\n                  {badgeText}\n                </p>\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div className=\"flex flex-row flex-wrap items-center gap-4\">\n          <p className=\"text-5xl\">{averageRating}</p>\n          <div>\n            <StarRating value={averageRating} readOnly />\n            <p>{totalReviews} reviews</p>\n          </div>\n        </div>\n\n        <div className=\"mb-4 flex flex-col gap-2\">\n          {ratingLevels.map((rating) => (\n            <RatingLevel\n              key={rating.level}\n              level={rating.level}\n              value={rating.value}\n              total={rating.total}\n            />\n          ))}\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <Button onClick={onReviewClick}>Review Now</Button>\n          <Button variant=\"link\" onClick={onSeeAllReviewsClick}>\n            See all reviews\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport default Review_02;\nexport type { RatingData, RatingLevelProps, Review_02Props };\n\nconst RatingLevel = ({ level, total, value }: RatingLevelProps) => {\n  return (\n    <div>\n      <div className=\"flex flex-row items-center gap-4\">\n        <div className=\"flex flex-row items-center gap-2\">\n          <Star size=\"16px\" fill=\"gray\" stroke=\"gray\" />\n          <p className=\"text-sm\">{level}</p>\n        </div>\n\n        <div className=\"grow\">\n          <div className=\"h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700\">\n            <div\n              className=\"width: 45% h-2.5 rounded-full\"\n              style={{ backgroundColor: \"#e4c616\", width: `${value}%` }}\n            ></div>\n          </div>\n        </div>\n        <div className=\"min-w-[80px]\">\n          <p className=\"text-sm\">\n            {value}% <span className=\"text-muted-foreground\">({total})</span>\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "path": "/components/commerce-ui/blocks/reviews/review-02.tsx",
      "target": "components/commerce-ui/review-02.tsx"
    }
  ]
}