Top
Em andamentoSeção escura de cursos em destaque: título com chapéu, setas de anterior e próximo, três cursos numa lista que rola na horizontal, cada um um CourseCard (E77), e o cartão final "Ver mais+". Os cursos vêm por cursos, no formato curto da vitrine.
- Função
- Cursos e matrícula
- Também chamado de
- cursos em destaque, vitrine, carrossel de cursos, os cursos
- Mora em
- app/components/organisms/TopCourses.tsx
- Última mudança
- 2026-09-30
Prévia
A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.
1280px, em tamanho real
Variantes na ficha
Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.
Quando usar
Na página inicial, para os cursos mais procurados.
Faça
- Passe
cursos(slug, categoria, título, descrição, carga, modalidade e imagem): a peça monta o CourseCard. - Mantenha poucos cursos — a fileira rola, mas a barra de rolagem é escondida.
Evite
- Contar com as setas como única forma de rolar: no celular, a fileira rola pelo toque.
Quando não usar. Para a grade do catálogo, use o CourseCard. Para um carrossel de topo, o HeroCarousel.
Anatomia
As partes, na ordem em que o olho — e o teclado — passam.
- Título — Um SectionTitle sobre escuro, com o chapéu "Os Cursos".
- Setas — Dois CarouselNavButton (escuro e claro), "Cursos anteriores" e "Próximos cursos", com `aria-controls` na lista; rolam 350px.
- Curso — Um CourseCard do sistema (E77) num `<li>` da lista "Cursos em destaque": o link é o título. Era o terceiro desenho de cartão de curso do repositório.
- Ver mais — Cartão-link translúcido para `/cursos`, com a seta num IconBox `primary` `interativo` (E64): fundo `--primary-subtle`, cheio no hover.
Estados
Os estados que a peça tem no código, e o que muda em cada um.
| Estado | O que muda |
|---|---|
| Padrão | Fundo --ink com dois brilhos vermelhos desfocados. |
| Hover no cartão | Sombra maior, imagem aproxima e título vermelho. |
Comportamento
| Situação | O que acontece |
|---|---|
| Setas | Rolam a fileira 350px para cada lado, suavemente, com encaixe por cartão. |
Relacionados
Como usar no código
A importação e o menor uso, lidos do arquivo. O … marca as props obrigatórias.
import TopCourses from '@/app/components/organisms/TopCourses';
<TopCourses />Propriedades
Lidas do código da peça no build — não escritas à mão.
| Prop | Tipo | Padrão | Obrigatória | Descrição |
|---|---|---|---|---|
cursos | CursoEmDestaque[] | CURSOS_PADRAO | não | Os cursos por prop (E77): eram fixos no arquivo. |
Tokens de cor
Os tokens semânticos que o código da peça usa, com o valor de hoje em app/globals.css.
| Token | Valor | Usado como |
|---|---|---|
--primary | #D42B2B | bg-primary/10bg-primary/5text-primary |
--foreground | #1A1A1A | bg-ink |
--ink-inverse | #FAFAFA | text-ink-inverse |
Teclado
| Tecla | Faz |
|---|---|
| Tab | As duas setas, o título de cada curso e "Ver mais+". |
| EnterEspaço | Nas setas, rolam a fileira; nos links, só Enter os segue. |
Leitor de tela
O que é anunciado, e por quê.
- Os cursos são uma lista ("Cursos em destaque"): o leitor diz quantos são. Cada um é o CourseCard — título
h3como link, imagem comalt="".
O que sustenta o estado
Esta peça usa estatico. O estado dela é o de quem já foi ouvido com leitor de tela nesses padrões — e não uma passada sobre esta peça em específico.
Falta ouvir: estatico — ver docs/a11y-screen-reader-checklist.md.
Status e recursos
| Tipo | Recurso | Status |
|---|---|---|
| Código | app/components/organisms/TopCourses.tsx | Disponível |
| Ficha | Storybook (abre em outra aba) | Disponível |
| Teste de acessibilidade | axe em npm run test | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |
Histórico
Os últimos commits que tocaram o arquivo, lidos do git no build.
0298af82026-09-30E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
O histórico completo está no GitHub (abre em outra aba).