{
  "name": "review-10-block",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/upvote-rating-basic.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport UpvoteRating_Basic from \"@/components/commerce-ui/upvote-rating-basic\";\nimport { Button } from \"@/components/ui/button\";\nimport { Check, Clock, Flag, Share2 } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface Review_10Props {\n  hunterName?: string;\n  hunterTitle?: string;\n  hunterAvatar?: string;\n  reviewDate?: string;\n  reviewTitle?: string;\n  reviewContent?: string;\n  initialUpvotes?: number;\n  initialDownvotes?: number;\n  initialUpvoted?: boolean;\n  initialDownvoted?: boolean;\n  productIcon?: string;\n  productName?: string;\n  verified?: boolean;\n}\n\nfunction Review_10({\n  hunterAvatar = \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-05.jpg\",\n  hunterName = \"Ryan Hoover\",\n  hunterTitle = \"Product Hunter\",\n  initialDownvoted = false,\n  initialDownvotes = 7,\n  initialUpvoted = false,\n  initialUpvotes = 128,\n  productIcon = \"https://avatar.vercel.sh/rauchg?rounded=60\",\n  productName = \"TaskMaster\",\n  reviewContent = \"I've tried countless to-do apps over the years, but TaskMaster has quickly become my default. What sets it apart is its perfect balance of simplicity and functionality. The UI is clean, focused, and doesn't overwhelm you with unnecessary features.\\n\\nThe standout feature is the 'Priority Matrix' that helps you sort tasks based on importance and urgency - a simple implementation of the Eisenhower matrix. The daily focus view shows only what you need to accomplish today, which reduces anxiety and increases productivity.\\n\\nSync works flawlessly across devices, and the offline mode has saved me multiple times. The developers are responsive and push updates regularly based on user feedback. If you're looking for a to-do app that stays out of your way while actually helping you get things done, this is it.\",\n  reviewDate = \"3 days ago\",\n  reviewTitle = \"TaskMaster - The simplest to-do app that actually works\",\n  verified = true,\n}: Review_10Props = {}) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isReported, setIsReported] = useState(false);\n  const [voteState, setVoteState] = useState({\n    downvoted: initialDownvoted,\n    downvotes: initialDownvotes,\n    upvoted: initialUpvoted,\n    upvotes: initialUpvotes,\n  });\n\n  // Handle sharing\n  const handleShare = () => {\n    if (navigator.share) {\n      navigator\n        .share({\n          text: `Check out this review of ${productName}`,\n          title: reviewTitle,\n          url: window.location.href,\n        })\n        .catch((err) => {\n          console.error(\"Error sharing:\", err);\n        });\n    } else {\n      navigator.clipboard.writeText(window.location.href);\n      alert(\"Link copied to clipboard!\");\n    }\n  };\n\n  // Format the content for display\n  const paragraphs = reviewContent.split(\"\\n\\n\");\n  const previewContent = isExpanded ? paragraphs : [paragraphs[0]];\n\n  return (\n    <div className=\"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={hunterAvatar}\n            alt={hunterName}\n            className=\"h-12 w-12 rounded-full object-cover\"\n          />\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <h3 className=\"font-semibold text-gray-900 dark:text-gray-100\">\n                {hunterName}\n              </h3>\n              {verified && (\n                <span className=\"inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-900/30 dark:text-orange-400\">\n                  <Check className=\"mr-1 h-3 w-3\" />\n                  Hunter\n                </span>\n              )}\n            </div>\n            <p className=\"text-sm text-gray-500 dark:text-gray-400\">\n              {hunterTitle}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <img\n            src={productIcon}\n            alt={productName}\n            className=\"h-8 w-8 rounded-lg object-cover\"\n          />\n          <span className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n            {productName}\n          </span>\n        </div>\n      </div>\n\n      <div className=\"mt-6\">\n        <h4 className=\"mb-3 text-xl font-semibold text-gray-900 dark:text-gray-100\">\n          {reviewTitle}\n        </h4>\n\n        <div className=\"space-y-4 text-gray-700 dark:text-gray-300\">\n          {previewContent.map((paragraph, index) => (\n            <p key={index}>{paragraph}</p>\n          ))}\n        </div>\n\n        {paragraphs.length > 1 && (\n          <Button\n            variant=\"link\"\n            size=\"sm\"\n            onClick={() => setIsExpanded(!isExpanded)}\n            className=\"mt-2 h-auto p-0 text-orange-600 dark:text-orange-400\"\n          >\n            {isExpanded ? \"Show less\" : \"Read more\"}\n          </Button>\n        )}\n      </div>\n\n      <div className=\"mt-6 flex flex-wrap items-center justify-between gap-4 border-t border-gray-200 pt-4 dark:border-gray-800\">\n        <div className=\"flex items-center gap-4\">\n          <UpvoteRating_Basic\n            upvotes={voteState.upvotes}\n            downvotes={voteState.downvotes}\n            upvoted={voteState.upvoted}\n            downvoted={voteState.downvoted}\n            onVoteChange={setVoteState}\n          />\n\n          <button\n            onClick={() => setIsReported(!isReported)}\n            className={`flex items-center gap-1 text-xs font-medium transition-colors ${\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            <Flag className=\"h-4 w-4\" />\n            {isReported ? \"Reported\" : \"Report\"}\n          </button>\n\n          <button\n            onClick={handleShare}\n            className=\"flex items-center gap-1 text-xs font-medium text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300\"\n          >\n            <Share2 className=\"h-4 w-4\" />\n            Share\n          </button>\n\n          <time className=\"text-xs text-gray-500 dark:text-gray-400\">\n            <Clock className=\"mr-1.5 inline h-4 w-4\" />\n            {reviewDate}\n          </time>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Review_10;\nexport type { Review_10Props };\n",
      "path": "/components/commerce-ui/blocks/reviews/review-10.tsx",
      "target": "components/commerce-ui/review-10.tsx"
    }
  ]
}