import Image from "next/image"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import workspaceService from "services/workspace.service"; // icons import User from "public/user.png"; // types import { IUser, IUserLite } from "types"; // fetch-keys import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; type AvatarProps = { user?: Partial | Partial | IUser | IUserLite | undefined | null; index?: number; height?: string; width?: string; fontSize?: string; }; export const Avatar: React.FC = ({ user, index, height = "20px", width = "20px", fontSize = "12px", }) => (
{user && user.avatar && user.avatar !== "" ? (
{user.first_name}
) : (
{user?.first_name && user.first_name !== "" ? user.first_name.charAt(0) : user?.email?.charAt(0)}
)}
); type AsigneesListProps = { users?: Partial | (Partial | undefined)[] | Partial[]; userIds?: string[]; length?: number; showLength?: boolean; }; export const AssigneesList: React.FC = ({ users, userIds, length = 5, showLength = true, }) => { const router = useRouter(); const { workspaceSlug } = router.query; const { data: people } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null ); if ((users && users.length === 0) || (userIds && userIds.length === 0)) return (
No user
); return ( <> {users && ( <> {users.slice(0, length).map((user, index) => ( ))} {users.length > length ? +{users.length - length} : null} )} {userIds && ( <> {userIds.slice(0, length).map((userId, index) => { const user = people?.find((p) => p.member.id === userId)?.member; return ; })} {showLength ? ( userIds.length > length ? ( +{userIds.length - length} ) : null ) : ( "" )} )} ); };