Acima da lista, incluir inputs para filtrar as vozes. Inicialmente os filtros estarão todos vazios.
Ter um select para cada dado (category, gender, accent, age, use case).
O componente de filtro deve estar em um arquivo em separado, e os hooks do componente em outro arquivo.
Popular os selects com valores, a partir dos dados que forem obtidos da requisição da lista, usando um reduce , que irá receber todas as vozes e retornar um único objeto com todos os possíveis valores, tal como o exemplo abaixo. Ao criar este objeto, dê um console.log nele pra facilitar a gente conferir rapidamente.
{
gender: ['Male','Female'],
...
}
A cada item selecionado nos selects de filtro, filtrar as vozes.
Ao filtrar por um atributo, por exemplo Gender: Male, serão apresentadas apenas o gender escolhido, portanto você deve omitir a tag gender dos cards.
geraldohomero
commented
1 month ago
Filtrar vozes
reduce, que irá receber todas as vozes e retornar um único objeto com todos os possíveis valores, tal como o exemplo abaixo. Ao criar este objeto, dê umconsole.lognele pra facilitar a gente conferir rapidamente.Gender: Male, serão apresentadas apenas ogenderescolhido, portanto você deve omitir a taggenderdos cards.