const { contract, projectId, boards, selectedProjectId, createBoard, onBoardSelected, showAddBoardDialog, onChangeShowAddBoardDialog, functionLoader, onChangeBoardName, boardName, editBoardName, showEditBoardDialog, onChangeShowEditBoardDialog, onEditBoardName, editedBoardId, editedBoardName, onChangeEditBoardName, showAddTaskDialog, taskTitle, taskDescription, onChangeTaskTitle, onChangeTaskDescription, onChangeShowAddTaskDialog, statusData, updateStatusData, getStatuses, onChangeFunctionLoader, clearTaskTitle, clearTaskDescription, createBoardStatus, showEditTaskDialog, onChangeShowEditTaskDialog, onEditTaskTitle, onEditTaskDescription, setEditTask, editTaskTitle, editTaskDescription, editTaskId, editTaskColumn, editTaskDialogTaskId, onChangeShowDeleteTaskDialog, showDeleteTaskDialog, deleteTaskId, deleteTaskColumn, deleteTaskStatus, onChangeDeleteTaskStatus, editBoardNameStatus, onChangeShowDeleteBoardDialog, showDeleteBoardDialog, deleteBoardStatus, deleteBoard } = props; const PageContainer = styled.div` display: flex; flex-direction: column; width: 100%; height: 100%; background-color: #0E0E10; padding-left: 60px; padding-right: 60px; padding-top: 26px; gap: 24px; `; const TaskChainLogo = styled.a` display: flex; flex-direction: space-between; align-items: center width: 100%; height: 100vh; background-color: #0E0E10; color: #FFFFFF; font-family: Inter; font-weight: 700; font-size: 20.92px; line-height: 31.39px; :hover { text-decoration: none; } `; const HeaderContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; `; const BoardContainer = styled.div` padding-top: 8px; display: flex; flex-direction: row; justify-content: center; `; const DeleteStatusContainer = styled.div` display: flex; flex-direction: column; `; const Divider = styled.div` width: 100%; height: 1px; background-color: #282933; `; const Text = styled.text` color: white; `; return ( <PageContainer> <HeaderContainer> <Widget src="calimero.testnet/widget/Calimero.TaskChain.TaskChainContainer.TaskChainLogo" /> <DeleteStatusContainer> {deleteTaskStatus.length > 0 && deleteTaskStatus.map(d => ( <Text key={d.id}> {d.status} </Text> )) } {deleteBoardStatus.length > 0 && deleteBoardStatus.map(b => ( <Text key={b.id}> {b.status} </Text> )) } </DeleteStatusContainer> </HeaderContainer> <Divider>.</Divider> <BoardContainer> <Widget src="calimero.testnet/widget/Calimero.TaskChain.SideMenu.SideMenu" props={{ boards: boards, selectedProjectId: selectedProjectId, createBoard, onBoardSelected, showAddBoardDialog, onChangeShowAddBoardDialog, functionLoader, onChangeBoardName, boardName, editBoardName, showEditBoardDialog, onChangeShowEditBoardDialog, onEditBoardName, editedBoardId, editedBoardName, onChangeEditBoardName, createBoardStatus, editBoardNameStatus, onChangeShowDeleteBoardDialog, showDeleteBoardDialog, deleteBoard }} /> {selectedProjectId && ( <Widget src="calimero.testnet/widget/Calimero.TaskChain.BoardContainer.Board" props={{ contract, projectId: selectedProjectId, showAddTaskDialog, taskTitle, taskDescription, onChangeTaskTitle, onChangeTaskDescription, onChangeShowAddTaskDialog, functionLoader, statusData, updateStatusData, onChangeFunctionLoader, clearTaskTitle, clearTaskDescription, showEditTaskDialog, onChangeShowEditTaskDialog, onEditTaskTitle, onEditTaskDescription, setEditTask, editTaskTitle, editTaskDescription, editTaskId, editTaskColumn, editTaskDialogTaskId, onChangeShowDeleteTaskDialog, showDeleteTaskDialog, deleteTaskId, deleteTaskColumn, deleteTaskStatus, onChangeDeleteTaskStatus, }} /> )} </BoardContainer> </PageContainer> )