upvote-rating-basic

1import { cn } from "@/lib/utils";
2import { ArrowBigDown, ArrowBigUp } from "lucide-react";
3import * as React from "react";
4 
5const UPVOTE_COLOR = "bg-[#ff4500]";
6const DOWNVOTE_COLOR = "bg-[#9494ff]";
7interface UpvoteRatingBasicProps {
8  upvotes: number;
9  downvotes: number;
10  upvoted: boolean;
11  downvoted: boolean;
12  upvoteIncrement?: number;
13  downvoteIncrement?: number;
14  onVoteChange: (newState: {
15    upvotes: number;
16    downvotes: number;
17    upvoted: boolean;
18    downvoted: boolean;
19  }) => void;
20}
21 
22const UpvoteRating_Basic = ({
23  downvoted,
24  downvoteIncrement = 1,
25  downvotes,
26  onVoteChange,
27  upvoted,
28  upvoteIncrement = 1,
29  upvotes,
30}: UpvoteRatingBasicProps) => {
31  const handleUpvote = () => {
32    if (upvoted) {
33      // Undo upvote
34      onVoteChange({
35        downvoted: false,
36        downvotes,
37        upvoted: false,
38        upvotes: upvotes - upvoteIncrement,
39      });
40    } else {
41      // Add upvote and remove downvote if exists
42      onVoteChange({
43        downvoted: false,
44        downvotes: downvoted ? downvotes - downvoteIncrement : downvotes,
45        upvoted: true,
46        upvotes: upvotes + upvoteIncrement,
47      });
48    }
49  };
50 
51  const handleDownvote = () => {
52    if (downvoted) {
53      // Undo downvote
54      onVoteChange({
55        downvoted: false,
56        downvotes: downvotes - downvoteIncrement,
57        upvoted: false,
58        upvotes,
59      });
60    } else {
61      // Add downvote and remove upvote if exists
62      onVoteChange({
63        downvoted: true,
64        downvotes: downvotes + downvoteIncrement,
65        upvoted: false,
66        upvotes: upvoted ? upvotes - upvoteIncrement : upvotes,
67      });
68    }
69  };
70 
71  const totalVotes = upvotes - downvotes;
72  const formattedVotes =
73    totalVotes >= 1000
74      ? `${(totalVotes / 1000).toFixed(1)}K`
75      : totalVotes.toLocaleString();
76 
77  return (
78    <div
79      className={cn(
80        "flex w-fit flex-row items-center gap-0 rounded-full border",
81        upvoted && UPVOTE_COLOR,
82        downvoted && DOWNVOTE_COLOR
83      )}
84    >
85      <button
86        onClick={handleUpvote}
87        className="cursor-pointer rounded-full p-1 hover:bg-zinc-800/30"
88      >
89        <ArrowBigUp
90          size={24}
91          className={cn("text-white", upvoted && "fill-white")}
92        />
93      </button>
94 
95      <span className="min-w-8 p-1 text-center text-white">
96        {formattedVotes}
97      </span>
98 
99      <button
100        onClick={handleDownvote}
101// … truncated