forked from github/plane
5b0066140f
* 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>
70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import { FC, Fragment } from "react";
|
|
import { Popover, Transition } from "@headlessui/react";
|
|
// helper
|
|
import { renderEmoji } from "helpers/emoji.helper";
|
|
// icons
|
|
import { SmilePlus } from "lucide-react";
|
|
// constants
|
|
import { issueReactionEmojis } from "constants/issue";
|
|
|
|
interface IIssueReactionSelector {
|
|
size?: "sm" | "md" | "lg";
|
|
position?: "top" | "bottom";
|
|
onSelect: (reaction: any) => void;
|
|
}
|
|
|
|
export const IssueReactionSelector: FC<IIssueReactionSelector> = (props) => {
|
|
const { size = "md", position = "top", onSelect } = props;
|
|
|
|
return (
|
|
<>
|
|
<Popover className="relative">
|
|
{({ open, close: closePopover }) => (
|
|
<>
|
|
<Popover.Button
|
|
className={`${
|
|
open ? "" : "bg-custom-background-80"
|
|
} group inline-flex items-center rounded-md bg-custom-background-80 transition-all hover:bg-custom-background-90 focus:outline-none`}
|
|
>
|
|
<span className={`flex items-center justify-center rounded px-2 py-1.5`}>
|
|
<SmilePlus className={`${size === "sm" ? "h-3 w-3" : size === "md" ? "h-3.5 w-3.5" : "h-4 w-4"}`} />
|
|
</span>
|
|
</Popover.Button>
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-1"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="transition ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0"
|
|
leaveTo="opacity-0 translate-y-1"
|
|
>
|
|
<Popover.Panel
|
|
className={`absolute -left-2 z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm ${
|
|
position === "top" ? "-top-10" : "-bottom-10"
|
|
}`}
|
|
>
|
|
<div className="flex gap-x-1">
|
|
{issueReactionEmojis.map((emoji) => (
|
|
<button
|
|
key={emoji}
|
|
type="button"
|
|
onClick={() => {
|
|
if (onSelect) onSelect(emoji);
|
|
closePopover();
|
|
}}
|
|
className="flex h-6 w-6 select-none items-center justify-center rounded p-1 text-sm transition-all hover:bg-custom-sidebar-background-80"
|
|
>
|
|
<div className="h-4 w-4">{renderEmoji(emoji)}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Popover>
|
|
</>
|
|
);
|
|
};
|