const { options } = props; const OptionContainer = styled.div` display: flex; flex-direction: column; width: 100%; position: relative; `; const OptionButton = styled.div` :hover { opacity: 0.8; } background-color: #0e0e10; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left; width: 100%; padding-right: 32px; padding-left: 32px; padding-top: 16px; padding-bottom: 16px; `; const OptionButtonText = styled.p` margin: 0; padding: 0; ${({ color }) => color && `color: ${color};`} `; return ( <OptionContainer> {options.map(option => ( <OptionButton onClick={option.onClick} > <OptionButtonText color="#dc3545">{option.buttonText}</OptionButtonText> </OptionButton> ))} </OptionContainer> );