Entrar Ainda não tem acesso?
1
resposta

[Sugestão] Minha forma de estilizar os livros usando a componentização e o styled elements

Referente ao curso React: comece seu projeto full stack, no capítulo Estados e atividade Componentes dinâmicos

por João Victor Pires Nascimento Dos Santos
| 47.8k xp | 28 posts

o código ficou assim(estou usando aspas simples no styled pra evitar erro no meu tópico kkkk): 

const Resultados = styled.div'  
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
'
const Resultado = styled.div'
    margin: 20px;
    transition: 0.4s all;

   &:hover {
        transform: scale(1.1)
    }
'
            <Resultados>
                { livrosPesquisados.map( livro => (
                    <Resultado>
                        <p>{livro.nome}</p>
                        <img src = { livro.src }/>
                    </Resultado>
                )) }
            </Resultados>

e aqui está o resultado: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Lorena Garcia
| 8349.6k xp | 12208 posts
Alura Scuba Team Suporte Educacional

Olá João, tudo bem?

Gostaria de parabenizá-lo pela abordagem de estilização dos livros utilizando componentização e styled elements. A estrutura que você criou com os componentes Resultados e Resultado demonstra um código organizado e reutilizável.

A utilização do display: flex com flex-direction: row em Resultados proporciona um layout flexível, enquanto align-items: center e justify-content: center centralizam os elementos vertical e horizontalmente. Isso é especialmente útil para manter uma exibição coesa dos livros pesquisados.

A estilização do componente Resultado é efetiva, com uma margem de 20px e uma transição suave de 0.4s para um efeito agradável durante o hover. O uso de transform: scale(1.1) para aumentar a escala durante o hover é uma escolha elegante, adicionando uma interatividade sutil e atraente.

A aplicação dessas propriedades aos elementos do mapa livrosPesquisados garante que cada livro seja exibido de maneira consistente e visualmente agradável.

Sua escolha de usar aspas simples para evitar problemas no tópico é inteligente e demonstra atenção aos detalhes.

Continue com o excelente trabalho na criação de componentes bem estruturados e estilizados.

Um abraço e bons estudos.