const currentPill = props.currentNavPill || ""; 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 pills = [ { id: "articles", title: "Articles", widgetName: "Main", }, { id: "authors", title: "Authors", widgetName: "Authors", }, { id: "create", title: "Create Article", widgetName: "CreateArticle", }, ]; return ( <div> <ul className="nav nav-pills nav-fill mb-4"> {pills.map(({ id, title, widgetName }, i) => ( <li className="nav-item"> <a href={transformUrl(`#/calimero.near/widget/Calimero.DocsChain.${widgetName}`)} class={`nav-link ${ id === currentPill ? "active" : "" } text-decoration-none`} > {title} </a> </li> ))} </ul> </div> );