const ProfileIconContainer = styled.div` position: relative; display: flex; justify-content: center; align-items: center; ${({ width }) => width && `width: ${width};`} ${({ height }) => height && `height: ${width};`} `; const ActiveStatusCricle = styled.div` position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; ${({ active }) => active ? "background-color: #00FF66;" : "background-color: #777583;"} border: 1px solid #1A1A1D; `; const accountId = props.accountId; const width = props.width ?? "24px"; const height = props.height ?? "24px"; return ( <ProfileIconContainer width={width} height={height}> <Widget src={`${props.componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.Image`} props={{ accountId, alt: `profile-icon-${accountId}`, className: "rounded-circle", style: { width: width, height: height, objectFit: "cover" }, thumbnail: "thumbnail", fallbackUrl: "https://i.imgur.com/e8buxpa.png", }} /> </ProfileIconContainer> );