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"; import { Plus } from "lucide-react"; // types import { IUser, IUserLite } from "types"; // fetch-keys import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; type AvatarProps = { user?: Partial | Partial | null; index?: number; height?: string; width?: string; fontSize?: string; showName?: boolean; }; // services const workspaceService = new WorkspaceService(); export const Avatar: React.FC = ({ user, index, height = "24px", width = "24px", fontSize = "12px", showName, }) => (
{user && user.avatar && user.avatar !== "" ? (
{user.display_name}
) : (
{user?.display_name?.charAt(0)}
)} {showName && {user?.display_name ? user?.display_name : user?.first_name}}
); type AsigneesListProps = { users?: Partial | (Partial | undefined)[] | Partial[]; userIds?: string[]; length?: number; showLength?: boolean; }; export const AssigneesList: React.FC = ({ 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 (
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 ) : ( "" )} )} ); };