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 ?? context.accountId; const profile = Social.getr(`${accountId}/profile`); const image = profile.image; const showStatus = props.showStatus ?? true; const width = props.width ?? "24px"; const height = props.height ?? "24px"; return ( <ProfileIconContainer width={width} height={height}> <Widget src="mob.near/widget/Image" props={{ image, alt: `profile-icon-${accountId}`, className: "rounded-circle", style: { width: width, height: height, objectFit: "cover" }, thumbnail: "thumbnail", fallbackUrl: "https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm", }} /> {showStatus && <ActiveStatusCricle active={props.active} />} </ProfileIconContainer> );