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

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

Abierto
#179 0 comentarios 0 reacciones 3 asignados Reclamado por @YokoFarias Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
8
Forks
2
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

# 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%.

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.