let accountId = props.accountId ?? context.accountId; const profile = Social.getr(`${accountId}/profile`); const feed_url = "https://nearweek.com/api/show-news?populate=deep&sort=id:desc&filters[publishedAt][$notNull][1]=null"; const showEditButton = !props.profile && accountId && accountId === context.accountId; const res = fetch(feed_url); if (res.error) return res.error; const Card = (item) => { return ( <div className="col-lg-3 col-sm-6 d-flex align-items-stretch mb-2"> <div className="card w-100"> <img class="card-img-top" src={`https://nearweek.com/${item.Image.url}`} height="180" alt={item.Title} /> <div class="card-body d-flex flex-column"> <h5 class="card-title text-center">{item.Title}</h5> <a href={`https://nearweek.com/news/${item.slug}`} class="mt-auto btn btn-primary" > View </a> </div> </div> </div> ); }; let news = []; for (let i = 0; i < res.body.data.length; i++) { const item = res.body.data[i]; news.push(Card(item)); } return ( <div> <div class="navbar navbar-dark bg-primary mb-2 p-2"> <span class="navbar-brand mb-0 p-2 h1 text-light">NEARWEEK</span> {showEditButton && ( <a href={`#/${accountId}/widget/ProfileEditor`} className="btn btn-secondary" > <span class="bi bi-gear"></span> </a> )} </div> <div className="container"> <div className="row">{news}</div> </div> </div> );