Os componentes reutilizáveis vivem em src/components. Esta página descreve os principais e quando usá-los.

Exibição de cartas

• CardGrid: a grade de cartas da busca, com proporção fiel à carta, elevação ao passar o mouse e estado vazio próprio.
• ManaCost e OracleText: renderizam os símbolos de mana oficiais a partir do texto, tanto no custo quanto no corpo de regras.

Busca e filtros

• FilterPanel: o painel de filtros da busca avançada, que submete via formulário e reflete tudo na URL.
• Pagination: a navegação de páginas, preservando os filtros atuais nos links.

Deck builder

• DeckBuilder: o componente cliente central, com busca instantânea, listas agrupadas por tipo, menu de cada carta, curva de mana, saúde do deck, integração com a coleção e os modais de importação, troca de arte e mão inicial.
• DeckTitle: o título editável do deck, que salva ao perder o foco.
• CreateDeckForm: o formulário de criação rápida na lista de decks.

Coleção

• CollectionManager: o componente cliente da coleção, com o painel de estatísticas, a lista editável, os filtros e os modais de importação e troca de edição.

Conteúdo editorial

• PatchNotes: o layout das Atualizações, com histórico lateral e conteúdo em markdown, no estilo das notas de versão de um jogo.

Padrões compartilhados

Alguns padrões se repetem e valem como referência ao criar telas novas:

• Busca instantânea: campo com atraso curto antes de consultar, navegação por teclado e seleção com Enter, presente no deck builder e na coleção.
• Modal: uma sobreposição escura centralizada, fechando ao clicar fora, usada para importar, trocar arte e ver a mão inicial.
• Pré visualização ao passar o mouse: uma coluna fixa que mostra a carta sob o cursor, no deck builder e na coleção.
• Atualização otimista pelo servidor: o cliente chama a API e em seguida pede ao servidor os dados novos, mantendo a verdade no banco.