Este foi o meu resultado
Este foi o meu resultado
Deixo o código caso algum dev precise.
const CampoTexto = () =>{
return(
<ContainerEstilizado>
<CampoTextoEstilizado placeholder="O que você procura?"/>
<IconeLupa src={'/icones/search.png'} alt="ícone de lupa" />
</ContainerEstilizado>
)
}
export default CampoTexto
const ContainerEstilizado = styled.div`
position: relative;
display: inline-block;
`;
const CampoTextoEstilizado = styled.input`
height: 56px;
padding: 12px 16px;
border-radius: 10px;
border: 2px solid #C98CF1;
background: transparent;
box-sizing: border-box;
width: 566px;
color: #D9D9D9;
font-weight: 400;
font-size: 20px;
line-height: 20px;
`
const IconeLupa = styled.img`
position: absolute;
top: 10px;
right: 10px;
width: 38px;
height: 38px;
`;