{
  "name": "upvote-rating-basic",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "import { cn } from \"@/lib/utils\";\nimport { ArrowBigDown, ArrowBigUp } from \"lucide-react\";\nimport * as React from \"react\";\n\nconst UPVOTE_COLOR = \"bg-[#ff4500]\";\nconst DOWNVOTE_COLOR = \"bg-[#9494ff]\";\ninterface UpvoteRatingBasicProps {\n  upvotes: number;\n  downvotes: number;\n  upvoted: boolean;\n  downvoted: boolean;\n  upvoteIncrement?: number;\n  downvoteIncrement?: number;\n  onVoteChange: (newState: {\n    upvotes: number;\n    downvotes: number;\n    upvoted: boolean;\n    downvoted: boolean;\n  }) => void;\n}\n\nconst UpvoteRating_Basic = ({\n  downvoted,\n  downvoteIncrement = 1,\n  downvotes,\n  onVoteChange,\n  upvoted,\n  upvoteIncrement = 1,\n  upvotes,\n}: UpvoteRatingBasicProps) => {\n  const handleUpvote = () => {\n    if (upvoted) {\n      // Undo upvote\n      onVoteChange({\n        downvoted: false,\n        downvotes,\n        upvoted: false,\n        upvotes: upvotes - upvoteIncrement,\n      });\n    } else {\n      // Add upvote and remove downvote if exists\n      onVoteChange({\n        downvoted: false,\n        downvotes: downvoted ? downvotes - downvoteIncrement : downvotes,\n        upvoted: true,\n        upvotes: upvotes + upvoteIncrement,\n      });\n    }\n  };\n\n  const handleDownvote = () => {\n    if (downvoted) {\n      // Undo downvote\n      onVoteChange({\n        downvoted: false,\n        downvotes: downvotes - downvoteIncrement,\n        upvoted: false,\n        upvotes,\n      });\n    } else {\n      // Add downvote and remove upvote if exists\n      onVoteChange({\n        downvoted: true,\n        downvotes: downvotes + downvoteIncrement,\n        upvoted: false,\n        upvotes: upvoted ? upvotes - upvoteIncrement : upvotes,\n      });\n    }\n  };\n\n  const totalVotes = upvotes - downvotes;\n  const formattedVotes =\n    totalVotes >= 1000\n      ? `${(totalVotes / 1000).toFixed(1)}K`\n      : totalVotes.toLocaleString();\n\n  return (\n    <div\n      className={cn(\n        \"flex w-fit flex-row items-center gap-0 rounded-full border\",\n        upvoted && UPVOTE_COLOR,\n        downvoted && DOWNVOTE_COLOR\n      )}\n    >\n      <button\n        onClick={handleUpvote}\n        className=\"cursor-pointer rounded-full p-1 hover:bg-zinc-800/30\"\n      >\n        <ArrowBigUp\n          size={24}\n          className={cn(\"text-white\", upvoted && \"fill-white\")}\n        />\n      </button>\n\n      <span className=\"min-w-8 p-1 text-center text-white\">\n        {formattedVotes}\n      </span>\n\n      <button\n        onClick={handleDownvote}\n        className=\"cursor-pointer rounded-full p-1 hover:bg-zinc-800/30\"\n      >\n        <ArrowBigDown\n          size={24}\n          className={cn(\"text-white\", downvoted && \"fill-white\")}\n        />\n      </button>\n    </div>\n  );\n};\n\nexport default UpvoteRating_Basic;\n",
      "path": "/components/commerce-ui/components/upvote-rating/basic/upvote-rating-basic.tsx",
      "target": "components/commerce-ui/upvote-rating-basic.tsx"
    }
  ]
}