1
resposta

Solução para a lista de redes sociais

Utilizei um array de objetos para tentar diminuir o código JSX repetido.

const Rodape = () => 
{
    const redesSociais = [
        {
            nome: "Facebook",
            src: "/imagens/fb.png",
            href: "https://facebook.com"
        },
        {
            nome: "Twitter",
            src: "/imagens/tw.png",
            href: "https://twitter.com"
        },
        {
            nome: "Instagram",
            src: "/imagens/ig.png",
            href: "https://instagram.com"
        }
    ];

    return (
        <footer className='redesSociais'>
            <section>
                <ul className='listaDeRedes'>
                    {redesSociais.map((rede) => {
                    return (
                        <li key={rede.nome}>
                            <a href={rede.href} target='_blank'>
                                <img src={rede.src} alt={rede.nome}></img>
                            </a>
                        </li>
                    )
                })}
                </ul>
            </section>

O restante do footer é praticamente igual.

1 resposta

Olá Gabriel, tudo bem?

Utilizar um array de objetos para as redes sociais foi uma ótima ideia, pois isso permite que você possa adicionar ou remover redes sociais facilmente.

Muito obrigada por compartilhar com a gente :D

Um abraço e bons estudos.