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

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

Đang mở
#179 0 bình luận 0 reaction 3 người được giao Được @YokoFarias nhận Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
8
Fork
2
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.