{
  "name": "review-03-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/star-rating-basic.json",
    "https://ui.stackzero.co/r/like-rating-basic.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport LikeRating from \"@/components/commerce-ui/like-rating-basic\";\nimport StarRating from \"@/components/commerce-ui/star-rating-basic\";\nimport { Button } from \"@/components/ui/button\";\nimport { useState, useRef, useEffect } from \"react\";\n\ninterface Review_03Props {\n  defaultRating?: number;\n  reviewerName?: string;\n  reviewerTitle?: string;\n  reviewerAvatar?: string;\n  initialLikes?: number;\n  initialDislikes?: number;\n  initialIsLiked?: boolean;\n  initialIsDisliked?: boolean;\n  reviewTitle?: string;\n  reviewContent?: string;\n}\n\nfunction Review_03({\n  defaultRating = 5,\n  initialDislikes = 1,\n  initialIsDisliked = false,\n  initialIsLiked = true,\n  initialLikes = 11,\n  reviewContent = \"I recently got my hands on this amazing bag, and after using it for a while, I can confidently say it is a solid choice for travelling. Verdict: If you are looking for an amazing backpack that balances comfort, organization, and durability, this is a great investment. Would definitely recommend it to anyone in need of a reliable bag! 🎒💼\",\n  reviewerAvatar = \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-07.jpg\",\n  reviewerName = \"Adam Smith\",\n  reviewerTitle = \"CEO ACME Inc.\",\n  reviewTitle = \"Wished I bought this thing sooner!!\",\n}: Review_03Props = {}) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [likes, setLikes] = useState(initialLikes);\n  const [dislikes, setDislikes] = useState(initialDislikes);\n  const [isLiked, setIsLiked] = useState(initialIsLiked);\n  const [isDisliked, setIsDisliked] = useState(initialIsDisliked);\n  const [isContentOverflowing, setIsContentOverflowing] = useState(false);\n  const contentRef = useRef<HTMLParagraphElement>(null);\n\n  // Check if content overflows when component mounts or content changes\n  useEffect(() => {\n    const checkOverflow = () => {\n      if (contentRef.current) {\n        // Check if scrollHeight is greater than clientHeight\n        const isOverflowing =\n          contentRef.current.scrollHeight > contentRef.current.clientHeight;\n        setIsContentOverflowing(isOverflowing);\n      }\n    };\n\n    // Run the check after render\n    checkOverflow();\n\n    // Also check on window resize in case layout changes\n    window.addEventListener(\"resize\", checkOverflow);\n    return () => window.removeEventListener(\"resize\", checkOverflow);\n  }, [reviewContent]);\n  return (\n    <div className=\"items-left flex max-w-2xl flex-col gap-6 rounded-lg border px-6 py-4\">\n      <div className=\"flex flex-row flex-wrap items-end justify-between gap-4\">\n        <div className=\"flex flex-row items-end justify-between gap-4\">\n          <img\n            src={reviewerAvatar}\n            alt=\"avatar\"\n            className=\"relative inline-block h-12 w-12 !rounded-full object-cover object-center\"\n          />\n          <div>\n            <p className=\"text-sm font-semibold\">{reviewerName}</p>\n            <p className=\"font-base text-muted-foreground text-sm\">\n              {reviewerTitle}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"text-muted-foreground max-w-[15ch] grow-0 text-sm\">\n          <span className=\"font-semibold\">{likes} people </span>found this\n          helpful\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-4\">\n        <StarRating value={defaultRating} readOnly />\n        <div>\n          <h2 className=\"mb-2 text-xl font-semibold\">{reviewTitle}</h2>\n          <p\n            ref={contentRef}\n            className={`text-muted-foreground ${isExpanded ? \"\" : \"line-clamp-3\"} text-ellipsis`}\n          >\n            {reviewContent}\n          </p>\n        </div>\n        {isContentOverflowing && (\n          <Button\n            className=\"px-0\"\n            variant=\"link\"\n            onClick={() => setIsExpanded(!isExpanded)}\n          >\n            {isExpanded ? \"Show less\" : \"Show more\"}\n          </Button>\n        )}\n      </div>\n\n      <div>\n        <LikeRating\n          dislikes={dislikes}\n          isDisliked={isDisliked}\n          isLiked={isLiked}\n          likes={likes}\n          onRatingChange={(newState) => {\n            setLikes(newState.likes);\n            setDislikes(newState.dislikes);\n            setIsLiked(newState.isLiked);\n            setIsDisliked(newState.isDisliked);\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport default Review_03;\nexport type { Review_03Props };\n",
      "path": "/components/commerce-ui/blocks/reviews/review-03.tsx",
      "target": "components/commerce-ui/review-03.tsx"
    }
  ]
}