upvote-rating-animated

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