const accountId = props.accountId ?? context.accountId; const profile = props.profile ?? Social.getr(`${accountId}/profile`); const showEditButton = !props.profile && accountId && accountId === context.accountId; const name = profile.name; const description = profile.description; const image = profile.image; const backgroundImage = profile.backgroundImage; const linktree = profile.linktree; return ( <div className="py-1 px-1"> <div className="mx-auto"> <div className="bg-white shadow rounded overflow-hidden"> <div className="px-4 pt-0 pb-5 bg-dark position-relative"> {backgroundImage && ( <Widget src="mob.near/widget/Image" props={{ image: backgroundImage, alt: "profile background", className: "position-absolute w-100 h-100", style: { objectFit: "cover", left: 0, top: 0 }, fallbackUrl: "https://thewiki.io/static/media/sasha_anon.6ba19561.png", }} /> )} <div className="profile-picture" style={{ transform: "translateY(7rem)" }} > <Widget src="mob.near/widget/ProfileImage" props={{ profile, accountId, style: { width: "10rem" }, className: "mb-2", imageClassName: "rounded-circle w-100 img-thumbnail d-block", thumbnail: false, }} /> </div> </div> <div className="bg-light px-4 pb-4 "> <div className="d-lg-flex justify-content-between" style={{ paddingTop: "1rem" }} > <div style={{ paddingTop: "3rem" }}> <h4 className="mt-0 mb-0">Eugene The Dream</h4> <p className="small"> <i className="bi bi-person-fill text-secondary me-1"></i> mob.near </p> </div> <div style={{ minWidth: "12rem" }}> <div> <i className="bi bi-github text-secondary me-1"></i> evgenykuzyakov </div> <div> <i className="bi bi-github text-secondary me-1"></i>Suppppar looooooooong website </div> <div> <i className="bi bi-github text-secondary me-1"></i>Github </div> <div> <i className="bi bi-github text-secondary me-1"></i>Github </div> </div> </div> <hr /> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div> </div> </div> </div> </div> ); return ( <div className="profile"> <Widget src="mob.near/widget/ProfileImage" props={{ profile, accountId, className: "float-start d-inline-block me-2", }} /> <div className="profile-info d-inline-block" style={{ maxWidth: "16em" }}> <div className="profile-name text-truncate"> {name || "No-name profile"} </div> <div className="profile-description">{description}</div> <div className="profile-links d-flex"> <div className="d-inline-block profile-account text-secondary text-truncate"> @{accountId} </div> {linktree.website && ( <div className="ms-1 d-inline-block"> <a href={`https://${linktree.website.replace("https://", "")}`}> <i className="bi bi-globe2 text-secondary"></i> </a> </div> )} {linktree.github && ( <div className="ms-1 d-inline-block"> <a href={`https://github.com/${linktree.github.replace( "https://github.com/", "" )}`} > <i className="bi bi-github text-secondary"></i> </a> </div> )} {linktree.twitter && ( <div className="ms-1 d-inline-block"> <a href={`https://twitter.com/${linktree.twitter.replace( "https://twitter.com/", "" )}`} > <i className="bi bi-twitter text-secondary"></i> </a> </div> )} {linktree.telegram && ( <div className="ms-1 d-inline-block"> <a href={`https://t.me/${linktree.telegram.replace( "https://t.me/", "" )}`} > <i className="bi bi-telegram text-secondary"></i> </a> </div> )} </div> </div> {showEditButton && ( <a href="#/mob.near/widget/ProfileEditor" className="profile-edit btn btn-sm btn-outline-secondary border-0 align-top" > Edit </a> )} </div> );