const { boards, selectedProjectId, createBoard, onBoardSelected } = props; State.init({ showCreateBoardModal: false }); 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> <button onClick={() => { console.log("clicked"); State.update({ showCreateBoardModal: true }); }}>+</button> <Widget src="calimero.testnet/widget/Calimero.TaskChain.CreateBoardDialog" props={{ createBoard: (boardName) => { createBoard(boardName).then(() => State.update({ showCreateBoardModal: false })); }, open: state.showCreateBoardModal, }} /> </div> <li class="nav-item"> { (boards || []).map(([id, name]) => ( <a class={`nav-link ${selectedProjectId === id ? "active" : ""}`} onClick={() => onBoardSelected(id)}>{name}</a>)) } </li> </ul> </div> );