const { projectId, boards, selectedProjectId, createBoard, onBoardSelected, } = props; const PageContainer = styled.div` display: flex; flex-direction: column; width: 100%; height: 100vh; 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 BoardContainer = styled.div` padding-top: 8px; display: flex; flex-direction: row; justify-content: center; `; const Divider = styled.div` width: 100%; height: 1px; background-color: #282933; `; return ( <PageContainer> <Widget src="calimero.testnet/widget/Calimero.TaskChain.TaskChainContainer.TaskChainLogo" /> <Divider>.</Divider> <BoardContainer> <Widget src="calimero.testnet/widget/Calimero.TaskChain.SideMenu.SideMenu" props={{ boards: boards, selectedProjectId: selectedProjectId, createBoard, onBoardSelected, }} /> {selectedProjectId && ( <Widget src="calimero.testnet/widget/Calimero.TaskChain.BoardContainer.Board" props={{ projectId: selectedProjectId, }} /> )} </BoardContainer> </PageContainer> )