CardLesson

Card para exibir aulas individuais dentro de um módulo. Mostra uma ilustração de capa da marca, o label do assunto e o título, uma coleção de indicadores de recursos (CardLessonIcon, com Badge opcional de contagem), uma tag de status e um botão de ação. Tem o estado default, para aulas disponíveis, e o estado blocked, para conteúdo bloqueado com data de liberação.

Exemplos

Completed

Passe status="completed" para o CardLessonStatus para exibir a tag verde de conclusão. Quando o CardLessonImage não tem src, exibe a ilustração da Medway. A coleção de ícones usa o CardLessonIcons como wrapper e um CardLessonIcon para cada recurso.

Assunto 1

Histologia do sistema digestório

Concluído

Started

Passe status="started" para exibir a tag âmbar de em andamento.

Assunto 2

Histologia do sistema cardiovascular

Iniciado

Sem status

Aula sem tag de status. O botão se alinha à direita automaticamente quando é o único filho do rodapé.

Assunto 3

Histologia do sistema respiratório

Bloqueado (`variant="blocked"`)

Defina variant="blocked" e passe a string availableDate, que é obrigatória. A ilustração da capa fica esmaecida, o rodapé renderiza sozinho uma tag de cadeado com a data e o botão fica desabilitado. Os indicadores de recursos não têm interação; no bloqueio, só trocam o fundo para gray-background-soft-muted.

Assunto 4

Histologia do sistema endócrino

Disponível em 05/03

Capa personalizada

Passe src para o CardLessonImage para trocar a ilustração padrão por uma thumbnail real.

Equipe cirúrgica operando em um centro cirúrgico

Assunto 5

Anatomia cirúrgica do abdome

Iniciado

Horizontal (visualização em lista)

Defina orientation="horizontal" para montar o card em linha: thumbnail à esquerda, label, título e coleção de ícones no meio, tag de status e botão de ação à direita. Use para renderizar aulas dentro de uma lista. Os mesmos subcomponentes funcionam nas duas orientações, inclusive no estado blocked.

O layout é responsivo: abaixo do breakpoint lg, ele volta sozinho para o layout vertical exato (capa em largura total, mesmo espaçamento). Redimensione a visualização para ver a troca.

Assunto 4

Trauma e abordagem inicial ao trauma

Iniciado

Assunto 5

Cuidados pré-operatórios no paciente clínico

Disponível em 05/03

API

Estrutura do CardLesson

Componente	Descrição	Uso
CardLesson	Container raiz vertical com borda, cantos arredondados e contexto de variante	Envolve todos os subcomponentes e passa o estado de variante para os filhos
CardLessonImage	Área de capa de `153 px` em largura total, com padding no topo e nas laterais. Sem `src`, exibe a ilustração da Medway. Aplica `opacity-20` em `blocked`	Omita `src` para usar a ilustração padrão, passe `src` para uma thumbnail personalizada ou adicione children para um placeholder personalizado
CardLessonContent	Wrapper em coluna com `gap-4` e padding `px-6 pt-4`	Envolve o `CardLessonHeader` e o `CardLessonIcons`. Coloque o `CardLessonFooter` como irmão, depois deste elemento
CardLessonHeader	Pilha compacta (sem gap) para o bloco de label e título	Envolve o `CardLessonLabel` e o `CardLessonTitle`
CardLessonLabel	Label pequeno em `text-xs` acima do título. A cor se adapta à variante	Passe o label do assunto como children
CardLessonTitle	Título semibold em `text-lg` com `line-clamp-2`. A cor se adapta à variante (esmaecida quando bloqueado)	Título principal da aula
CardLessonIcons	Linha flex única (`gap-2.5`, sem quebra) para a coleção de ícones de recursos	Envolve um ou mais elementos `CardLessonIcon`
CardLessonIcon	Indicador circular `40×40` sem interação (superfície `gray-background-soft`, ícone `gray-foreground-muted`) com um `Badge` opcional. Não tem comportamento de hover nem de clique	Passe um `icon` e, se quiser, uma contagem em `badge`
CardLessonDuration	Indicador de duração	Passe o texto da duração como children, ex.: `35 min`
CardLessonFooter	Irmão do `CardLessonContent`. Linha `justify-between` com padding `px-6 pb-6 pt-4`; insere sozinho a `Tag` de cadeado (`"Disponível em {availableDate}"`) quando `blocked`	Sempre inclua o `CardLessonButton`. O `CardLessonStatus` é opcional
CardLessonStatus	`Tag` pré-configurada. `"completed"` renderiza `success-soft` com ícone de check; `"started"` renderiza `warning-soft`	Coloque dentro do `CardLessonFooter`
CardLessonButton	Por padrão usa `variant="regular"`, `size="sm"` e `rounded-full`, e fica desabilitado em `blocked`. As props passadas (`variant`, `size`, `disabled`, `className`) sobrescrevem esses valores. O wrapper recebe `ml-auto` por padrão (ajustável por `containerClassName`), então o botão fica no fim do rodapé	Passe o texto via `children`. Use `onClick` para a navegação

CardLesson

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.
orientation	`"vertical" \| "horizontal"`	`"vertical"`	Layout do card. `"vertical"` empilha capa, conteúdo e rodapé; `"horizontal"` coloca tudo em linha (thumbnail à esquerda, conteúdo no meio, ação à direita) para listas, voltando ao layout vertical abaixo do breakpoint `lg`.
availableDate	string	-	Obrigatório quando `variant="blocked"`. Aparece na tag de cadeado do rodapé como `"Disponível em {availableDate}"` (ex.: `"05/03"`).
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardLessonImage

Propriedade	Tipo	Padrão	Descrição
src	string	-	URL da imagem. Quando omitida (e sem children), renderiza a ilustração da Medway.
alt	string	`""`	Texto alternativo da imagem.
children	React.ReactNode	-	Quando informado, é renderizado dentro de um placeholder personalizado (tem prioridade sobre a ilustração padrão).
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardLessonIcon

Propriedade	Tipo	Padrão	Descrição
icon	React.ReactNode	-	Obrigatório. O ícone renderizado dentro do indicador circular.
badge	number \| string	-	Contagem opcional renderizada como um `Badge` cinza (texto azul-marinho) no canto superior direito. Fica oculta quando o valor é menor que `2` (vazio, `0` ou `1`, já que um item só não precisa de contagem).
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div. O indicador não tem interação (sem hover nem clique).

CardLessonStatus

Propriedade	Tipo	Padrão	Descrição
status	`"completed" \| "started"`	-	Obrigatório. `"completed"` renderiza a `Tag` `success-soft` com ícone de check e o texto "Concluído"; `"started"` renderiza a `Tag` `warning-soft` sem ícone e com o texto "Iniciado".
...props	TagProps	-	Aceita todas as props de `Tag` (exceto `variant` e `icon`, que são controladas por `status`).

CardLessonButton

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Texto do botão. Obrigatório para definir a chamada para ação.
...props	ButtonProps	-	Aceita todas as props de Button. O padrão é `variant="regular"`, `size="sm"` e `rounded-full`. Fica desabilitado automaticamente em `blocked` (uma prop `disabled` explícita tem prioridade).