Criei uma lista de objetos com chaves e valores, referente valor de cada atributo data, implementei na função handleClick, assim apropria função cria a mudança de acordo com [data]:
/* ------ Variavel pega o titulo ------ */
const title = tag('.app__title');
/* ------ Variavel Objeto que armazena os textos ------ */
const texts = {
'foco': `Otimize sua produtividade,<br>
<strong class="app__title-strong">Mergulhe no que importa.</strong>`,
'descanso-curto': ` Que tal dar uma respirada? ,<br>
<strong class="app__title-strong">Faça uma pausa curta!</strong>`,
'descanso-longo': `Hora de voltar à superfície ,<br>
<strong class="app__title-strong">Faça uma pausa Longa!</strong>`
}
/* ------ Função que controla o evento e iterage com os elementos ------ */
function handleClick (target, tag, data, image) {
target.addEventListener('click', () => {
tag.setAttribute('data-contexto', data);
banner.setAttribute('src', image);
// passando valores como objetos usando [data]
title.innerHTML = texts[data] || title.innerHTML;
buttons.forEach((item) => {
if (item === target) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
});