plane/web/components/issues/peek-overview/reactions/preview.tsx
Aaryan Khandelwal 539c7a3455 refactor: issue peek overview (#3001)
* refactor: peek overview components

* fix: issue reactions

* chore: update comment types

* fix: access sepcifier value

* chore: remove unused vars

* fix: build errors

* build-error: build error resolved

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: gurusainath <gurusainath007@gmail.com>
2023-12-07 19:59:35 +05:30

49 lines
1.6 KiB
TypeScript

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 items-center gap-1.5 text-custom-text-100 text-sm h-full px-2 py-1 rounded ${
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>
);
};