const { comment, componentOwnerId } = props; const CommentContainer = styled.div` width: 100%; display: flex; flex-direction: column; `; const CommenterInfoContainer = styled.div` width: 100%; display: flex; align-items: center; column-gap: 0.5rem; display: flex; justify-content: flex-start; `; const ProfileIconContainerMsg = styled.div` display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; text-align: center; font-family: Helvetica Neue; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; `; const NameContainerCommenter = styled.div` display: flex; justify-content: start; align-items: center; color: #6c757d; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; padding-top: 2px; `; const TimeText = styled.p` color: #adb5bd; font-family: Helvetica Neue; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; padding-top: 1rem; `; const MessageText = styled.div` max-width: 100%; position: relative; word-wrap: break-word; display: flex; flex-direction: column; padding: 1rem; color: #fff; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; border-radius: 0px 8px 8px 8px; background-color: #1e1f28; `; const formatTimeAgo = (seconds) => { const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); const weeks = Math.floor(days / 7); const months = Math.floor(weeks / 4); if (months > 0) { return `${months} month${months > 1 ? 's' : ''} ago`; } else if (weeks > 0) { return `${weeks} week${weeks > 1 ? 's' : ''} ago`; } else if (days > 0) { return `${days} day${days > 1 ? 's' : ''} ago`; } else if (hours > 0) { return `${hours} hour${hours > 1 ? 's' : ''} ago`; } else if (minutes > 0) { return `${minutes} minute${minutes > 1 ? 's' : ''} ago`; } else { return `just now`; } }; return ( <CommentContainer> <CommenterInfoContainer ownMessage={props.message.sender === context.accountId} > <ProfileIconContainerMsg> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: comment.member_id, showStatus: false, componentOwnerId: componentOwnerId, }} /> </ProfileIconContainerMsg> <NameContainerCommenter>{comment.member_id}</NameContainerCommenter> <TimeText>{formatTimeAgo((Date.now() - comment.date) / 1000)}</TimeText> </CommenterInfoContainer> <MessageText>{comment.message}</MessageText> </CommentContainer> );