48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { observer } from "mobx-react";
|
|
import { useParams } from "next/navigation";
|
|
// plane utils
|
|
import { cn } from "@plane/utils";
|
|
// components
|
|
import { IssueEmojiReactions } from "@/components/issues/reactions/issue-emoji-reactions";
|
|
import { IssueVotes } from "@/components/issues/reactions/issue-vote-reactions";
|
|
// hooks
|
|
import { usePublish } from "@/hooks/store/publish";
|
|
|
|
type Props = {
|
|
issueId: string;
|
|
};
|
|
export const BlockReactions = observer(function BlockReactions(props: Props) {
|
|
const { issueId } = props;
|
|
const { anchor } = useParams();
|
|
const { canVote, canReact } = usePublish(anchor.toString());
|
|
|
|
// if the user cannot vote or react then return empty
|
|
if (!canVote && !canReact) return <></>;
|
|
|
|
return (
|
|
<div className="flex w-full flex-wrap rounded-b-lg border-t-[1px] border-t-subtle-1 bg-surface-2 outline-transparent">
|
|
<div className="flex flex-wrap items-center gap-2 px-3 py-2">
|
|
{canVote && (
|
|
<div
|
|
className={cn(`flex items-center gap-2 pr-1`, {
|
|
"after:ml-1 after:h-6 after:w-[1px] after:bg-layer-3": canReact,
|
|
})}
|
|
>
|
|
<IssueVotes anchor={anchor.toString()} issueIdFromProps={issueId} size="sm" />
|
|
</div>
|
|
)}
|
|
{canReact && (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<IssueEmojiReactions anchor={anchor.toString()} issueIdFromProps={issueId} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|