CardTopic

Card em linha, no estilo acordeão, para exibir um tema (assunto/capítulo) dentro de um curso. Tem o estado default, com acompanhamento de progresso opcional, e o estado blocked, para conteúdo bloqueado com data de liberação. Usa o componente Collapsible por baixo, com animação de acordeão.

Exemplos

Em andamento

O estado padrão, com a barra de progresso parcialmente preenchida.

A lista de aulas entra aqui

Concluído

Passe progress={100} para exibir o texto "Concluído" com a barra verde cheia.

Sem indicador de progresso

Omita o CardTopicProgress quando não fizer sentido acompanhar o progresso.

Bloqueado (`variant="blocked"`)

Defina variant="blocked" junto com o availableDate, que é obrigatório. A área de progresso mostra sozinha um badge de cadeado com a data. O badge do número e o título ficam esmaecidos. O trigger não é interativo: não tem clique nem animação do chevron.

Referência da API

Subcomponentes

Subcomponente	Descrição	Observações de uso
CardTopic	Container raiz recolhível. Fornece o contexto de variante para todos os subcomponentes e aplica a animação de acordeão	Sempre o wrapper mais externo. Aceita todas as props do `Collapsible` (`open`, `defaultOpen`, `onOpenChange`)
CardTopicTrigger	Linha clicável de largura total que abre e fecha o collapsible. Usa uma linha flex (o primeiro filho cresce para ocupar o espaço disponível) para posicionar o conteúdo. Fica desabilitada e sem interação quando `variant="blocked"`	Coloque dois `CardTopicColumn` como filhos: o primeiro para número + título, o segundo para progresso + contagem
CardTopicColumn	Linha flex com quebra (`gap-4`) para agrupar subcomponentes lado a lado. Dentro do `CardTopicTrigger`, a primeira coluna cresce para ocupar o espaço disponível	Use a primeira para `CardTopicNumber` + `CardTopicTitle` e a segunda para `CardTopicProgress` + `CardTopicCount`
CardTopicNumber	Badge circular numerado. O fundo fica esmaecido quando `variant="blocked"` (o número mantém a cor on-fill)	Passe o número sequencial como children, ex.: `1`
CardTopicTitle	Nome do tema. Usa `flex-1` para ocupar a coluna da esquerda. O texto fica esmaecido quando `variant="blocked"`	Passe o nome do tema como children
CardTopicProgress	Exibe o status do progresso. Em andamento, mostra `"{n}% de progresso"` + barra; concluído, mostra "Concluído" + barra verde; bloqueado, mostra uma `Tag` de cadeado com `"Disponível em {availableDate}"` (nada, se faltar o `availableDate`). Não renderiza nada se `progress` for omitido e a variante não for blocked	Passe `progress` (0 a 100) na variante default. Na variante blocked, omita ou deixe vazio: a data vem do contexto
CardTopicCount	Texto com a contagem de itens e o ícone de chevron animado, renderizado internamente. A rotação do chevron é desativada quando `variant="blocked"`	Passe o texto da contagem como children, ex.: `10 itens`
CardTopicContent	Área de conteúdo recolhível. Animada como acordeão (desliza para cima e para baixo). Aplica padding `px-4 pb-4` por padrão	Coloque aqui cards de aula, listas ou qualquer outro conteúdo. Omita por completo em temas bloqueados

CardTopic

Propriedade	Tipo	Padrão	Descrição
variant	`"default" \| "blocked"`	`"default"`	Controla o estado visual do card inteiro e de todos os subcomponentes que dependem da variante.
availableDate	string	-	Obrigatório quando `variant="blocked"`. Aparece no badge de cadeado dentro do `CardTopicProgress` (ex.: `"05/03"`).
defaultOpen	boolean	`false`	Estado inicial de aberto (modo não controlado).
open	boolean	-	Estado de aberto controlado. Use junto com `onOpenChange`.
onOpenChange	`(open: boolean) => void`	-	Função chamada quando o estado de aberto muda.
...props	CollapsibleProps	-	Todas as props do root do Radix Collapsible são repassadas.

CardTopicProgress

Propriedade	Tipo	Padrão	Descrição
progress	number	-	Valor do progresso, de 0 a 100. É limitado automaticamente a esse intervalo. Se omitido com variante `"default"`, o componente não renderiza nada. Com variante `"blocked"`, a prop é ignorada.