const members = props.members || ["symonov.near", "khomin.near"]; const socialDBKeys = members.map((item) => item + "/profile"); const data = Social.getr(socialDBKeys); if (!data) { return "Loading"; } const socialsFromLinktree = (linktree) => { const socialsArray = Object.entries(linktree); return socialsArray.map((item) => ( <li class="list-inline-item"> <Widget src="symonov.near/widget/SocialLink" props={{ key: item[0], value: item[1] }} /> </li> )); }; const membersWidgets = members.map((member) => { const profile = data[member].profile; return ( <div class="col-xl-3 col-sm-6 mb-4"> <div class="bg-white rounded shadow-sm py-5 px-4 text-center h-100"> <Widget src="mob.near/widget/Image" props={{ image: profile.image, alt: `title`, style: { width: "125px", height: "125px", objectFit: "cover" }, className: "img-fluid rounded-circle mb-3 img-thumbnail shadow-sm", fallbackUrl: "https://thewiki.io/static/media/sasha_anon.6ba19561.png", }} /> <h5 class="mb-0">{profile.name}</h5> <span class="small text-uppercase text-muted"> {profile.description || "not specified"} </span> <ul class="social mb-0 list-inline mt-3"> {socialsFromLinktree(profile.linktree)} </ul> </div> </div> ); }); return <div className="row justify-content-center">{membersWidgets}</div>;