const Popup = styled.div` display: flex; align-items: center; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; padding-top: 1rem; border-bottom: solid 1px #282933; margin-bottom: 1rem; `; const SwitchOption = styled.div` display: flex; column-gap: 0.5rem; padding-right: 1rem; ${({ leftPadding }) => leftPadding && "padding-left: 1rem;"} cursor: pointer; ${({ selected }) => (selected ? "color: #5765F2" : "color: #fff;")} `; return ( <Popup> <SwitchOption selected={props.selected} onClick={() => !props.selected && props.onSwitch()} > <i className="bi bi-info-circle-fill"></i> <p>About</p> </SwitchOption> <SwitchOption selected={!props.selected} leftPadding={true} onClick={() => props.selected && props.onSwitch()} > <i clclassNameass="bi bi-people-fill"></i> <p>Members {props.userCount > 0 && <span>{props.userCount}</span>}</p> </SwitchOption> </Popup> );