aceleradora-TW / aceleradora-TW/e-acelera-front

[MVP2] detalhe do tópico: visualizar progresso (barra)

Aberta
#179 0 comentários 0 reações 3 responsáveis Reivindicada por @YokoFarias Ver no GitHub
Linguagem predominante
TypeScript
Estrelas
8
Forks
2
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

# Contexto
- Precisamos de um componente visual no frontend que permita ao usuário acompanhar seu progresso dentro de um tópico específico.
- Esse componente será exibido na tela de detalhe do tópico e também poderá ser reutilizado na listagem de tópicos.
- Esse recurso é essencial para incentivar a continuidade dos estudos e permitir que o usuário tenha um feedback visual imediato do quanto já avançou naquele conteúdo.
- O componente pode ser reutilizado em outras partes da plataforma, e seu comportamento deve ser dinâmico com base na propriedade progress (%) de cada tópico.
- Exemplo de detalhe de tópico seria https://aceleradora-agil.com.br/nivelamento/rw1730218811141b9a688-React.js/rw173038056720390e1fe-Hooks

## Dependências
- [POC: Componente LinearProgressWithLabel do Material UI para Detalhes do Tópico](https://github.com/aceleradora-TW/e-acelera-front/issues/178)

## Notas Técnicas
- Endpoint da API: GET /topic/:topicId/progress

json 

{
"progress": 100
}

- A autenticação deve estar implementada no frontend O JWT (token de login)

## Critérios
- O componente deve ser reutilizável (por exemplo: );
- O valor de progresso deve ser passado via props (progress em número de 0 a 100);
- Deve permitir visualização textual opcional, como: "80% concluído";
- O estilo visual deve seguir o design do Figma ([ver link da issue #173](https://www.figma.com/design/iHXQ4VOdO3yojF4Gk4mizL/E-Acelera-prot%C3%B3tipo?node-id=407-1742&t=Tb7T8sC9ABj3ueSz-4));
- O componente deve ser inserido na tela de detalhe do tópico, em local estratégico (ex: topo da tela ou abaixo do título);
- Responsivo e acessível
- O progresso deve ser reativo (caso atualize no frontend, deve refletir no componente);
- O componente deve permitir fácil estilização para temas futuros.

## Tarefa
- Usar o componente TopicProgress com:
- Barra de progresso visual
- Texto opcional ("X% concluído");
- Adicionar esse componente na página de detalhe do tópico;
- Garantir que o valor de progress seja passado corretamente a partir da chamada ao endpoint da API;
- Fazer testes com valores 0%, 50%, 100%.

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.