import Image from "next/image"; import { useRouter } from "next/router"; import useSWR from "swr"; // component import { Icon } from "components/ui"; // 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<IUser> | Partial<IUserLite> | null; index?: number; height?: string; width?: string; fontSize?: string; }; export const Avatar: React.FC<AvatarProps> = ({ user, index, height = "24px", width = "24px", fontSize = "12px", }) => ( <div className={`relative rounded border-[0.5px] ${ index && index !== 0 ? "-ml-3.5 border-custom-border-200" : "border-transparent" }`} style={{ height: height, width: width, }} > {user && user.avatar && user.avatar !== "" ? ( <div className={`rounded border-[0.5px] ${ index ? "border-custom-border-200 bg-custom-background-100" : "border-transparent" }`} style={{ height: height, width: width, }} > <img src={user.avatar} className="absolute top-0 left-0 h-full w-full object-cover rounded" alt={user.display_name} /> </div> ) : ( <div className="grid place-items-center text-xs capitalize text-white rounded bg-gray-700 border-[0.5px] border-custom-border-200" style={{ height: height, width: width, fontSize: fontSize, }} > {user?.display_name?.charAt(0)} </div> )} </div> ); type AsigneesListProps = { users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[]; userIds?: string[]; length?: number; showLength?: boolean; }; export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 3, 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 ( <div className="h-5 w-5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-80"> <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" /> </div> ); return ( <> {users && ( <> {users.slice(0, length).map((user, index) => ( <Avatar key={user?.id} user={user} index={index} /> ))} {users.length > length ? ( <div className="-ml-3.5 relative h-6 w-6 rounded"> <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300"> <Icon iconName="add" className="text-xs !leading-3 -mr-0.5" /> {users.length - length} </div> </div> ) : null} </> )} {userIds && ( <> {userIds.slice(0, length).map((userId, index) => { const user = people?.find((p) => p.member.id === userId)?.member; return <Avatar key={userId} user={user} index={index} />; })} {showLength ? ( userIds.length > length ? ( <div className="-ml-3.5 relative h-6 w-6 rounded"> <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300"> <Icon iconName="add" className="text-xs !leading-3 -mr-0.5" /> {userIds.length - length} </div> </div> ) : null ) : ( "" )} </> )} </> ); };