const { comments, componentOwnerId } = props; const Comments = styled.div` width: 100%; display: flex; flex-direction: row; align-items: flex-start; gap: 84px; margin-top: 1rem; `; const CommentsContainer = styled.div` display: flex; flex-direction: column; gap: 10px; width: 520px; `; const Label = styled.label` color: #777583; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left; width: 104px; height: 40px; padding: 8px 60px 8px 16px; border-radius: 4px; background-color: transparent; :focus { outline-color: #d0fc42; outline-style: solid; outline-width: 1px; } border: none; `; return ( <Comments> <Label>Comments</Label> <CommentsContainer> {comments && comments.map((comment, id) => ( <Widget key={comment.id + id} src={`${componentOwnerId}/widget/Calimero.TaskChain.BoardContainer.Task.Comment`} props={{ comment, componentOwnerId, }} /> ))} <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.BoardContainer.Task.CommentInput`} props={{ componentOwnerId, }} /> </CommentsContainer> </Comments> );