const { boards, selectedProjectId, createBoard, onBoardSelected } = props; const SideMenuContainer = styled.div` display: flex; flex-direction: column; flex-shrink: 0; width: 230px; height: 100%; padding-left: 0; background-color: #0E0E10; color: white; padding: 3px; gap: 16px; `; return ( <> <Widget src="calimero.testnet/widget/Calimero.TaskChain.CreateBoardDialog" props={{ createBoard: (boardName) => { createBoard(boardName).then(() => State.update({ showCreateBoardModal: false })); }, open: state.showCreateBoardModal, }} /> <SideMenuContainer> <Widget src="calimero.testnet/widget/Calimero.TaskChain.SideMenu.AddBoard" props={{ onClick: () => { console.log("clicked"); State.update({ showCreateBoardModal: true }); } }} /> <Widget src="calimero.testnet/widget/Calimero.TaskChain.SideMenu.BoardList" props={{ selected: selectedProjectId, onClick: () => onBoardSelected(id), boards: boards, }} /> </SideMenuContainer> </> );