like-rating-basic

1import { cn } from "@/lib/utils";
2import { ThumbsDown, ThumbsUp } from "lucide-react";
3 
4interface LikeRatingBasicProps {
5  likes: number;
6  dislikes: number;
7  isLiked: boolean;
8  isDisliked: boolean;
9  likeIncrement?: number;
10  dislikeIncrement?: number;
11  onRatingChange: (newState: {
12    likes: number;
13    dislikes: number;
14    isLiked: boolean;
15    isDisliked: boolean;
16  }) => void;
17  className?: string;
18}
19 
20const LikeRating_Basic = ({
21  className,
22  dislikeIncrement = 1,
23  dislikes = 0,
24  isDisliked,
25  isLiked,
26  likeIncrement = 1,
27  likes = 0,
28  onRatingChange,
29}: LikeRatingBasicProps) => {
30  const handleLike = () => {
31    if (isLiked) {
32      // Undo like
33      onRatingChange({
34        dislikes,
35        isDisliked: false,
36        isLiked: false,
37        likes: likes - likeIncrement,
38      });
39    } else {
40      // Add like and remove dislike if exists
41      onRatingChange({
42        dislikes: isDisliked ? dislikes - dislikeIncrement : dislikes,
43        isDisliked: false,
44        isLiked: true,
45        likes: likes + likeIncrement,
46      });
47    }
48  };
49 
50  const handleDislike = () => {
51    if (isDisliked) {
52      // Undo dislike
53      onRatingChange({
54        dislikes: dislikes - dislikeIncrement,
55        isDisliked: false,
56        isLiked: false,
57        likes,
58      });
59    } else {
60      // Add dislike and remove like if exists
61      onRatingChange({
62        dislikes: dislikes + dislikeIncrement,
63        isDisliked: true,
64        isLiked: false,
65        likes: isLiked ? likes - likeIncrement : likes,
66      });
67    }
68  };
69 
70  const formatCount = (count: number) =>
71    count >= 1000 ? `${(count / 1000).toFixed(1)}K` : count.toLocaleString();
72 
73  return (
74    <div
75      className={cn(
76        "inline-flex cursor-pointer -space-x-px rounded-lg shadow-xs shadow-black/5 rtl:space-x-reverse",
77        className
78      )}
79    >
80      <div
81        className={cn(
82          "flex min-w-[4rem] flex-row items-center justify-center rounded-none border px-2 py-1 font-mono shadow-none first:rounded-s-lg last:rounded-e-lg hover:bg-[#009e42]/20 focus-visible:z-10",
83          isLiked && "bg-[#009e42]/20 text-[#009e42]"
84        )}
85        onClick={handleLike}
86        aria-label="Like"
87        aria-labelledby="like-count"
88        title="Like"
89      >
90        <ThumbsUp
91          size={16}
92          strokeWidth={2}
93          aria-hidden="true"
94          className={cn("mr-2", isLiked && "text-[#009e42]")}
95        />
96        {formatCount(likes)}
97      </div>
98      <div
99// … truncated