const ChannelListContainer = styled.div` background-color: #0e0e10; width: 317px; `; const ChannelListItem = styled.div` display: flex; justify-content: space-between; align-items: center; 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 TextMedium = styled.div` font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; `; const NameContainer = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; return ( <ChannelListContainer> {props.channelList.map((channel, id) => ( <ChannelListItem key={id} selected={props.selectedChannelId === id}> <NameContainer onClick={() => props.selectChannel(id)}> <i class="bi bi-hash"></i> <TextMedium>{channel.name}</TextMedium> </NameContainer> </ChannelListItem> ))} </ChannelListContainer> );