const UserListItem = styled.div` display: flex; justify-content: space-between; align-items: center; color: #777583; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; :hover { color: #ffffff; } :hover { background-color: #25252a; } cursor: pointer; ${({ selected }) => selected ? "color: #fff; background-color: #25252a;" : "color: #777583; background-color: #0E0E10;"} `; const UserInfoContainer = styled.div` display: flex; column-gap: 0.5rem; `; const NameContainer = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; return ( <> {props.users.length && props.users.map((user, id) => ( <UserListItem onClick={() => props.onSelectDM(user.id)} selected={props.selectedDM === user.id} key={id} > <UserInfoContainer> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.ProfileIcon.UserProfileIcon`} props={{ accountId: user.id, active: user.active }} /> <NameContainer> {`${user.id}`} </NameContainer> </UserInfoContainer> {false && ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.UnreadMessagesBadge`} props={{ messageCount: user.unreadMessages, }} /> )} </UserListItem> ))} </> );