import { FC } from "react"; // helpers import { renderEmoji } from "helpers/emoji.helper"; interface IIssueReactionPreview { issueReactions: any; user: any; handleReaction: (reaction: string) => void; } export const IssueReactionPreview: FC<IIssueReactionPreview> = (props) => { const { issueReactions, user, handleReaction } = props; const isUserReacted = (reactions: any) => { const userReaction = reactions?.find((reaction: any) => reaction.actor === user?.id); if (userReaction) return true; return false; }; return ( <div className="flex items-center gap-2"> {Object.keys(issueReactions || {}).map( (reaction) => issueReactions[reaction]?.length > 0 && ( <button type="button" onClick={() => handleReaction(reaction)} key={reaction} className={`flex h-full items-center gap-1.5 rounded px-2 py-1 text-sm text-custom-text-100 ${ isUserReacted(issueReactions[reaction]) ? `bg-custom-primary-100/10 hover:bg-custom-primary-100/30` : `bg-custom-background-90 hover:bg-custom-background-100/30` }`} > <span className="text-sm">{renderEmoji(reaction)}</span> <span className={`${ isUserReacted(issueReactions[reaction]) ? `text-custom-primary-100 hover:text-custom-primary-200` : `` }`} > {issueReactions[reaction].length} </span> </button> ) )} </div> ); };