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> );