forked from github/plane
0d036e6bf5
* refactor: dropdown button components * chore: dropdowns accessibility improvement * chore: update module dropdown * chore: update option content * chore: hide icon from the peek overview --------- Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { observer } from "mobx-react-lite";
|
|
// hooks
|
|
import { useMember } from "hooks/store";
|
|
// ui
|
|
import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui";
|
|
|
|
type AvatarProps = {
|
|
showTooltip: boolean;
|
|
userIds: string | string[] | null;
|
|
};
|
|
|
|
export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
|
|
const { showTooltip, userIds } = props;
|
|
// store hooks
|
|
const { getUserDetails } = useMember();
|
|
|
|
if (Array.isArray(userIds)) {
|
|
if (userIds.length > 0)
|
|
return (
|
|
<AvatarGroup size="md" showTooltip={!showTooltip}>
|
|
{userIds.map((userId) => {
|
|
const userDetails = getUserDetails(userId);
|
|
|
|
if (!userDetails) return;
|
|
return <Avatar key={userId} src={userDetails.avatar} name={userDetails.display_name} />;
|
|
})}
|
|
</AvatarGroup>
|
|
);
|
|
} else {
|
|
if (userIds) {
|
|
const userDetails = getUserDetails(userIds);
|
|
return <Avatar src={userDetails?.avatar} name={userDetails?.display_name} size="md" showTooltip={!showTooltip} />;
|
|
}
|
|
}
|
|
|
|
return <UserGroupIcon className="h-3 w-3 flex-shrink-0" />;
|
|
});
|