{
  "name": "review-06-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 { Check } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface Review_06Props {\n  reviewerName?: string;\n  reviewerTitle?: string;\n  reviewerAvatar?: string;\n  reviewDate?: string;\n  reviewTitle?: string;\n  reviewContent?: string;\n  rating?: number;\n  initialUsefulCount?: number;\n  initialHelpfulCount?: number;\n  initialInsightfulCount?: number;\n  verified?: boolean;\n}\n\nfunction FeedbackButton({\n  active,\n  children,\n  count,\n  onClick,\n}: {\n  children: React.ReactNode;\n  count: number;\n  active: boolean;\n  onClick: () => void;\n}) {\n  return (\n    <Button\n      variant={active ? \"secondary\" : \"outline\"}\n      size=\"sm\"\n      onClick={onClick}\n      className={`rounded-full text-xs ${\n        active\n          ? \"bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/50 dark:text-blue-400\"\n          : \"\"\n      }`}\n    >\n      {children}\n      <span className=\"ml-1 font-normal\">({count})</span>\n    </Button>\n  );\n}\n\nfunction Review_06({\n  initialHelpfulCount = 17,\n  initialInsightfulCount = 9,\n  initialUsefulCount = 24,\n  rating = 5,\n  reviewContent = \"I've been using this product daily for about a month now, and I can honestly say it has transformed my routine. The quality is exceptional compared to similar items I've tried before. It's durable, well-designed, and the attention to detail is evident. The customer service experience was also outstanding when I had a question about maintenance. Highly recommend to anyone looking for a reliable solution that actually delivers on its promises.\",\n  reviewDate = \"August 15, 2023\",\n  reviewerAvatar = \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-01.jpg\",\n  reviewerName = \"Adam Smith\",\n  reviewerTitle = \"Verified Customer\",\n  reviewTitle = \"Exceeded my expectations in every way\",\n  verified = true,\n}: Review_06Props = {}) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [usefulCount, setUsefulCount] = useState(initialUsefulCount);\n  const [helpfulCount, setHelpfulCount] = useState(initialHelpfulCount);\n  const [insightfulCount, setInsightfulCount] = useState(\n    initialInsightfulCount\n  );\n  const [isUsefulActive, setIsUsefulActive] = useState(false);\n  const [isHelpfulActive, setIsHelpfulActive] = useState(false);\n  const [isInsightfulActive, setIsInsightfulActive] = useState(false);\n  const [isReported, setIsReported] = useState(false);\n\n  // Truncate content for preview with a reasonable length\n  const previewContent =\n    reviewContent.length > 280 && !isExpanded\n      ? reviewContent.substring(0, 280) + \"...\"\n      : reviewContent;\n\n  return (\n    <div className=\"flex flex-col gap-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-4\">\n          <img\n            src={reviewerAvatar}\n            alt={reviewerName}\n            className=\"h-12 w-12 rounded-full object-cover ring-2 ring-white dark:ring-gray-800\"\n          />\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <h3 className=\"font-semibold text-gray-900 dark:text-gray-100\">\n                {reviewerName}\n              </h3>\n              {verified && (\n                <span className=\"inline-flex items-center rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400\">\n                  <Check className=\"mr-1 h-4 w-4\" />\n                  Verified\n                </span>\n              )}\n            </div>\n            <p className=\"text-sm text-gray-500 dark:text-gray-400\">\n              {reviewerTitle}\n            </p>\n          </div>\n        </div>\n        <time className=\"text-xs text-gray-500 dark:text-gray-400\">\n          {reviewDate}\n        </time>\n      </div>\n\n      <div>\n        <div className=\"mb-2 flex items-center gap-2\">\n          <StarRating value={rating} readOnly iconSize={18} />\n          <span className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n            {rating}/5\n          </span>\n        </div>\n        <h4 className=\"mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100\">\n          {reviewTitle}\n        </h4>\n        <p className=\"text-gray-700 dark:text-gray-300\">{previewContent}</p>\n\n        {reviewContent.length > 280 && (\n          <Button\n            variant=\"link\"\n            size=\"sm\"\n            onClick={() => setIsExpanded(!isExpanded)}\n            className=\"mt-2 h-auto p-0 text-blue-600 dark:text-blue-400\"\n          >\n            {isExpanded ? \"Show less\" : \"Read more\"}\n          </Button>\n        )}\n      </div>\n\n      <div className=\"flex flex-wrap items-center justify-between gap-3 border-t border-gray-200 pt-4 dark:border-gray-800\">\n        <div className=\"flex flex-wrap gap-2\">\n          <FeedbackButton\n            count={usefulCount}\n            active={isUsefulActive}\n            onClick={() => {\n              setIsUsefulActive(!isUsefulActive);\n              setUsefulCount(\n                isUsefulActive ? usefulCount - 1 : usefulCount + 1\n              );\n            }}\n          >\n            Useful\n          </FeedbackButton>\n          <FeedbackButton\n            count={helpfulCount}\n            active={isHelpfulActive}\n            onClick={() => {\n              setIsHelpfulActive(!isHelpfulActive);\n              setHelpfulCount(\n                isHelpfulActive ? helpfulCount - 1 : helpfulCount + 1\n              );\n            }}\n          >\n            Helpful\n          </FeedbackButton>\n          <FeedbackButton\n            count={insightfulCount}\n            active={isInsightfulActive}\n            onClick={() => {\n              setIsInsightfulActive(!isInsightfulActive);\n              setInsightfulCount(\n                isInsightfulActive ? insightfulCount - 1 : insightfulCount + 1\n              );\n            }}\n          >\n            Insightful\n          </FeedbackButton>\n        </div>\n\n        <button\n          onClick={() => setIsReported(!isReported)}\n          className={`text-xs font-medium ${\n            isReported\n              ? \"text-red-500 dark:text-red-400\"\n              : \"text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300\"\n          }`}\n        >\n          {isReported ? \"Reported\" : \"Report\"}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nexport default Review_06;\nexport type { Review_06Props };\n",
      "path": "/components/commerce-ui/blocks/reviews/review-06.tsx",
      "target": "components/commerce-ui/review-06.tsx"
    }
  ]
}