Utilizei uma abordagem um pouco diferente. Criei uma função no ui.js que cria a div com o texto e a img:
listaVazia() {
const listaContainer = document.getElementById(
"lista-pensamentos-container"
);
const texto = document.createElement("p");
texto.id = "texto-vazio";
texto.textContent =
"Nada por aqui ainda, que tal compartilhar alguma ideia?";
const imagem = document.createElement("img");
imagem.id = "imagem-vazio";
imagem.src = "assets/imagens/lista-vazia.png";
imagem.alt = "Ícone caixa vazia";
const vazio = document.createElement("div");
vazio.classList.add("vazio-div");
vazio.appendChild(texto);
vazio.appendChild(imagem);
listaContainer.appendChild(vazio);
},
Estilizei no css:
#lista-pensamentos-container .vazio-div {
display: flex;
flex-direction: column;
align-items: center;
}
#texto-vazio {
margin-bottom: 16px;
color: var(--Azul-Dark, #041832);
font-family: "Poppins", sans-serif;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
#imagem-vazio {
width: 100px;
}
e fiz a verificação na renderizarPensamentos() para chamar a listaVazia():
async renderizarPensamentos() {
const listaPensamentos = document.getElementById("lista-pensamentos");
listaPensamentos.innerHTML = "";
try {
const pensamentos = await api.buscarPensamentos();
pensamentos.forEach(ui.adicionarPensamento);
if (pensamentos.length === 0) {
this.listaVazia();
}
} catch (error) {
alert("Erro: ", error);
}
},