const contract = props.contract || "docschain.ws-protocol-63"; const componentOwnerId = props.componentOwnerId ?? "calimero.testnet"; const redirectConfig = !componentOwnerId || componentOwnerId === "calimero.near" ? {} : { redirect: (url) => url.replace("calimero.near", componentOwnerId)}; const transformUrl = (url) => !componentOwnerId || componentOwnerId === "calimero.near" ? "calimero.near" : url.replace("calimero.near", componentOwnerId); const Container = styled.div` background-color: #0e0e10; width: 317px; `; const Item = styled.div` display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; &:hover { color: #ffffff; } a { text-decoration: none; color: inherit; &:hover { color: #ffffff; } } :hover { background-color: #25252a; } cursor: pointer; ${({ selected }) => selected ? "color: #fff; background-color: #25252a;" : "color: #777583; background-color: #0E0E10;"} `; const TextMedium = styled.div` font-size: 16px; font-style: normal; font-weight: 400; padding-top: 1px; `; const NameContainer = styled.a` display: flex; justify-content: start; align-items: center; gap: 12px; width: 100%; text-decoration: none; color: #777583; &:hover, &:active, &:visited { text-decoration: none; color: #777583; } `; const CircleIcon = styled.div` border-radius: 50%; width: 16px; height: 16px; background-color: #4e95ff; `; const getDateLastEdit = (timestamp) => { const date = new Date(Number(timestamp) / 1e6); const dateString = `${date.toLocaleDateString()} / ${date.toLocaleTimeString()}`; return dateString; }; const allArticles = Near.calimeroView( contract, "get_article_ids_paged", {} ).map((articleId) => { return { id: articleId, data: Near.calimeroView(contract, "get_article", { article_id: articleId }), }; }); return ( <Container> {(allArticles ?? []).map((article) => ( <Item key={article.id} selected={props.selectedArticleId === article.id}> <NameContainer href={transformUrl(`#/calimero.near/widget/Calimero.DocsChain.ArticleView?articleId=${article.id}&blockHeight=${article.data.blockHeight}&lastEditor=${article.data.author})`)} > {article.body.icon ? <p>{article.body.icon}</p> : <CircleIcon />} <TextMedium> {article.data.body.split("\n")[0].replace("# ", "")} </TextMedium> </NameContainer> </Item> ))} </Container> );