const currentPill = props.currentNavPill || ""; const componentOwnerId = props.componentOwnerId || "igi.testnet"; 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={`#/${componentOwnerId}/widget/Calimero.DocsChain.${widgetName}`} class={`nav-link ${ id === currentPill ? "active" : "" } text-decoration-none`} > {title} </a> </li> ))} </ul> </div> );