const selectorOptions = props.selectorOptions; const selected = props.selected; const color = props.color ?? "#D0FC42"; const onClick = props.onClick; const SelectorContainer = styled.div` display: flex; flex-direction: row; background-color: transparent; gap: 16px; `; const OptionButton = styled.div` display: flex; justify-content: center; align-items: center; gap: 8px; ${({ selected }) => selected ? `color: ${color};` : "color: #fff;"} :hover { color: ${color}; } cursor: pointer; `; const P = styled.p` margin: 0; `; return ( <SelectorContainer> {selectorOptions.map(option => ( <OptionButton onClick={() => onClick(option.id)} selected={selected === option.id}> <i className={option.icon}></i> <P>{option.title}</P> </OptionButton> ))} </SelectorContainer> )