const currentPill = props.currentNavPill || ''; const componentOwnerId = props.componentOwnerId ?? 'calimero.testnet'; 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 key={i} className="nav-item"> <a href={transformUrl( `#/calimero.near/widget/Calimero.DocsChain.${widgetName}`, )} className={`nav-link ${ id === currentPill ? 'active' : '' } text-decoration-none`} > {title} </a> </li> ))} </ul> </div> );