plane/web/components/issues/peek-overview/reactions/preview.tsx
sriram veeraghanta 8d15b9e7de
chore: format all files in monorepo (#3054)
* chore: format all files in the project

* fix: removing @types/react from dependencies

* fix: adding prettier and eslint config

* chore: format files

* fix: upgrading turbo version

* chore: ignoring warnings and adding todos

* fix: updated the type of bubble menu item in the document editor

* chore: format files

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-12-10 15:48:10 +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 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>
);
};