Componentes
Grouped Feed Card
Variante do Feed Card para quando um usuário adiciona vários discos de uma vez. Cabeçalho com avatar + nome + badge de contagem, grid de capas e rodapé com ações.
Visão geral
Anatomia
1
Cabeçalho
Avatar + nome + timestamp + badge de contagem de discos. Badge: bg-lime/15 border-lime/30 color:#C8F53C.
2
Grid de capas
2 discos → grid-cols-2. 3+ discos → grid-cols-3. gap: 1px com background:#0a0a0a simulando borda.
3
Overlay "+N"
Última célula visível recebe bg-black/65 com "+N" centralizado quando há mais discos do que o grid exibe (máx 5 visíveis em 3-cols).
4
Rodapé
Like + comentário + texto descritivo opcional. Mesmo padrão do Feed Card individual.
Variantes
2 discos — grid 2 colunas
3+ discos — grid 3 colunas
9+ discos — overlay "+N"
Do / Don't
Faça
Use para aquisições em lote com 3 ou mais discos. O grid 2×2 exibe as capas mais relevantes; discos extras entram no overlay "+N" no quarto quadrante.
Evite
Não use o Grouped Feed Card para 1 ou 2 discos. Use o Feed Card simples. O grid com metade vazia fica desequilibrado e comunica mal a aquisição.
Specs
| Propriedade | Valor |
|---|---|
| Grid 2 discos | grid-template-columns: repeat(2, 1fr) |
| Grid 3+ discos | grid-template-columns: repeat(3, 1fr) |
| Gap entre células | 1px, fundo #0a0a0a |
| Overlay "+N" | bg: rgba(0,0,0,0.65), texto #f5f5f5 font-weight:700 |
| Badge contagem | bg: rgba(200,245,60,0.15) · border: rgba(200,245,60,0.3) · color: #C8F53C |
| Máx células visíveis | 5 (3-cols) ou 2 (2-cols), com overflow em overlay |