cal.pub0.org/packages/features/bookings/components/event-meta/Members.tsx

43 lines
1.4 KiB
TypeScript

import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
import { SchedulingType } from "@calcom/prisma/enums";
import { AvatarGroup } from "@calcom/ui";
import type { PublicEvent } from "../../types";
export interface EventMembersProps {
/**
* Used to determine whether all members should be shown or not.
* In case of Round Robin type, members aren't shown.
*/
schedulingType: PublicEvent["schedulingType"];
users: PublicEvent["users"];
profile: PublicEvent["profile"];
}
export const EventMembers = ({ schedulingType, users, profile }: EventMembersProps) => {
const showMembers = schedulingType !== SchedulingType.ROUND_ROBIN;
const shownUsers = showMembers ? [...users, profile] : [profile];
const avatars = shownUsers
.map((user) => ({
title: `${user.name}`,
image: "image" in user ? `${user.image}` : `${WEBAPP_URL}/${user.username}/avatar.png`,
alt: user.name || undefined,
href: user.username ? `${CAL_URL}/${user.username}` : undefined,
}))
.filter((item) => !!item.image)
.filter((item, index, self) => self.findIndex((t) => t.image === item.image) === index);
return (
<>
<AvatarGroup size="sm" className="border-muted" items={avatars} />
<p className="text-subtle text-sm font-semibold">
{users
.map((user) => user.name)
.filter((name) => name)
.join(", ")}
</p>
</>
);
};