const { boards, selectedBoardName, createBoard, onBoardSelected } = props; return ( <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style={{width: "280px", height: "100%"}}> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <span class="fs-4">TaskChain</span> </a> <hr/> <ul class="nav nav-pills flex-column mb-auto"> <div class="d-flex justify-content-between align-items-center"> <h4 class="text-white">Your boards</h4> <Widget src="xabi.testnet/widget/TaskChain.CreateBoardDialog" props={{ createBoard: (boardName, boardAccount) => createBoard(boardName, boardAccount), toggle: <button>+</button> }} /> </div> <li class="nav-item"> { (boards || []).map((board) => ( <a class={`nav-link ${selectedBoardName === board.name ? "active" : ""}`} onClick={() => onBoardSelected(board.account)}>{board.name}</a>)) } </li> </ul> </div> );