Reaction Pill

1"use client";
2 
3import * as React from "react";
4import { Toggle } from "@base-ui/react/toggle";
5import { cn } from "@/lib/utils";
6import "@/components/ui/whatsapp/styles/whatsapp.css";
7 
8interface ReactionPillProps {
9  emoji: string;
10  count?: number;
11  reacted?: boolean;
12  onPressedChange?: (pressed: boolean) => void;
13  className?: string;
14}
15 
16const ReactionPill = React.forwardRef<HTMLButtonElement, ReactionPillProps>(
17  ({ emoji, count, reacted = false, onPressedChange, className }, ref) => {
18    return (
19      <Toggle
20        ref={ref}
21        pressed={reacted}
22        onPressedChange={onPressedChange}
23        className={cn(
24          "relative z-10 font-wa inline-flex items-center gap-[3px] rounded-full border px-[6px] py-[2px] text-[13px] leading-[18px] shadow-sm transition-colors",
25          "border-wa-border bg-wa-bg text-wa-text-primary",
26          "data-[pressed]:border-wa-emerald-500 data-[pressed]:bg-wa-green-75 dark:data-[pressed]:bg-[#005c4b]",
27          className
28        )}
29      >
30        <span>{emoji}</span>
31        {count !== undefined && count > 0 && (
32          <span className="text-[12px] text-wa-text-secondary">{count}</span>
33        )}
34      </Toggle>
35    );
36  }
37);
38ReactionPill.displayName = "ReactionPill";
39 
40export { ReactionPill, type ReactionPillProps };