const { contract, boards, selectedProjectId, createBoard, onBoardSelected, showAddBoardDialog, onChangeShowAddBoardDialog, functionLoader, onChangeBoardName, boardName, editBoardName, showEditBoardDialog, onChangeShowEditBoardDialog, onEditBoardName, editedBoardId, editedBoardName, onChangeEditBoardName, createBoardStatus, editBoardNameStatus, onChangeShowDeleteBoardDialog, showDeleteBoardDialog, deleteBoard } = props; const SideMenuContainer = styled.div` display: flex; flex-direction: column; flex-shrink: 0; width: 230px; padding-left: 0; background-color: #0E0E10; color: white; padding: 3px; gap: 16px; `; return ( <> {showDeleteBoardDialog && <Widget src="calimero.testnet/widget/Calimero.TaskChain.ConfirmationPopup" props={ { onClick: () => deleteBoard(), onClose: () => onChangeShowDeleteBoardDialog(false, undefined, title), } } /> } {showAddBoardDialog && <Widget src="calimero.testnet/widget/Calimero.TaskChain.CreateBoardDialog" props={{ createBoard, onChangeShowAddBoardDialog, open: showAddBoardDialog, functionLoader, onChangeBoardName, boardName }} />} {showEditBoardDialog && <Widget src="calimero.testnet/widget/Calimero.TaskChain.SideMenu.EditBoardDialog" props={{ createBoard, onClose: () => onChangeShowEditBoardDialog(false, undefined, undefined), open: showEditBoardDialog, functionLoader, onChangeEditBoardName, boardName, editedBoardId, editedBoardName, editBoardName, editBoardNameStatus, onChangeShowDeleteBoardDialog }} />} <SideMenuContainer> <Widget src="calimero.testnet/widget/Calimero.TaskChain.SideMenu.AddBoard" props={{ onClick: () => onChangeShowAddBoardDialog(true) }} /> <Widget src="calimero.testnet/widget/Calimero.TaskChain.SideMenu.BoardList" props={{ selected: selectedProjectId, onClick: onBoardSelected, boards: boards, onEditBoardClick, editBoard, onChangeShowEditBoardDialog, createBoardStatus }} /> </SideMenuContainer> </> );