Reaction

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import "@/components/ui/whatsapp/styles/whatsapp.css";
6 
7export interface Reaction {
8  emoji: string;
9  /** Providing count enables group display mode */
10  count?: number;
11  reacted?: boolean;
12}
13 
14export function ReactionsDisplay({ reactions }: { reactions: Reaction[] }) {
15  const total = reactions.reduce((sum, r) => sum + (r.count ?? 0), 0);
16 
17  if (reactions.length === 1) {
18    const r = reactions[0];
19    return (
20      <span className={cn(
21        "relative z-10 inline-flex items-center rounded-full border px-[6px] py-[2px] text-[13px] leading-none shadow-sm",
22        "border-wa-border bg-wa-bg",
23        r.reacted && "border-wa-emerald-500 bg-wa-green-75 dark:bg-[#005c4b]"
24      )}>
25        {r.emoji}
26        {r.count !== undefined && r.count > 0 && (
27          <span className="ml-[3px] text-[12px] text-wa-text-secondary">{r.count}</span>
28        )}
29      </span>
30    );
31  }
32 
33  // 2+ reactions — overlapping emojis + optional total
34  return (
35    <span className="relative z-10 inline-flex items-center rounded-full border border-wa-border bg-wa-bg px-[7px] py-[3px] shadow-sm">
36      <span className="flex items-center">
37        {reactions.map((r, i) => (
38          <span
39            key={i}
40            className="inline-flex h-[20px] w-[20px] items-center justify-center rounded-full border-[1.5px] border-wa-bg text-[12px] leading-none"
41            style={{ marginLeft: i > 0 ? "-5px" : "0", position: "relative", zIndex: reactions.length - i }}
42          >
43            {r.emoji}
44          </span>
45        ))}
46      </span>
47      {total > 0 && (
48        <span className="ml-[5px] text-[12px] font-medium text-wa-text-secondary">{total}</span>
49      )}
50    </span>
51  );
52}