Componentes
Feed Card
Unidade principal do Feed. Exibe uma adição de disco por um usuário seguido. Estrutura vertical em três zonas: cabeçalho, imagem e rodapé.
Visão geral
Anatomia
1
Cabeçalho
Avatar w-9 h-9 + display_name font-semibold text-sm + @username · tempo text-xs #888. Toque → perfil do autor.
2
Imagem
aspect-square w-full · sem border-radius (full bleed) · toque simples → disco · toque duplo → like
3
Rodapé
Ações (like + comentário + stars em flex gap-5) · metadados · review em line-clamp-3
Especificação por zona
Zona 1 — Cabeçalho
Avatar
w-9 h-9 rounded-full flex-shrink-0
display_name + @username · tempo
display_name: font-semibold text-sm text-[#f5f5f5]
@username · tempo: text-xs text-[#888] mt-1
timeAgo(record.created_at)
Tap
navigate(`/${username}`)
container: w-full px-4 py-3 active:bg-[#111]
Zona 2 — Imagem
com capa
♪
Container
aspect-square w-full bg-[#1a1a1a]
(sem border-radius — full bleed)
Imagem / Placeholder
Capa: w-full h-full object-cover
Sem capa: text-[#888] text-6xl "♪" centrado
Interações
Tap simples → /disco/:id (após 300ms)
Duplo tap → like + heart burst
(só se ainda não curtiu)
Zona 3 — Rodapé
Linha de ações
flex items-center gap-5
Like: heart 24px (inativo: stroke="#888", ativo: fill="#C8F53C")
Comentário: bubble 24px stroke="#888"
Stars: componente Stars (14px, gap 0.5) — só quando rating existe
Metadados
álbum: font-bold text-sm text-[#f5f5f5]
artista · ano: text-xs text-[#888] mt-0.5
"adicionado por X": text-xs text-[#888] mt-1
review: text-sm text-[#888] mt-2 leading-relaxed line-clamp-3
Variantes
Agrupado — GroupedFeedCard
Mesmo disco adicionado por múltiplos usuários. Avatares empilhados no cabeçalho.
Avatares empilhados
w-7 h-7 rounded-full
border-2 border-[#0f0f0f]
-ml-2 (overlap 8px)
z-index decrescente
Legenda
"{nome1}, {nome2} e mais N adicionaram este disco"
text-[#888] text-sm · nome1 em text-[#f5f5f5] font-semibold
Do / Don't
Stars como 3º item na linha de ações — sem margin-left:auto
Faça
Stars inline na linha de ações com
gap-5. Não empurrar para a direita.
Stars deslocadas com margin-left:auto
Evite
Stars com
margin-left:auto quebram o alinhamento e não seguem o padrão da linha de ações.
Specs
| Elemento | Propriedade | Valor |
|---|---|---|
| Card | Border bottom (separador) | 1px solid #1a1a1a |
| Cabeçalho | Padding | px-4 py-3 |
| Avatar | Tamanho | w-9 h-9 (36px) |
| display_name | Estilo | font-semibold text-sm text-[#f5f5f5] |
| @username · tempo | Estilo | text-xs text-[#888] mt-1 |
| Imagem | Proporção | aspect-square w-full · full bleed |
| Like ativo | Ícone | fill="#C8F53C" · contador text-[#C8F53C] |
| Like inativo | Ícone | stroke="#888" fill="none" |
| Stars | Tamanho | 14×14px gap-0.5 · 3º item do flex gap-5 |
| Álbum | Estilo | font-bold text-sm text-[#f5f5f5] |
| Artista · Ano | Estilo | text-xs text-[#888] mt-0.5 |
| Review | Estilo | text-sm text-[#888] mt-2 leading-relaxed line-clamp-3 |
| Grouped avatares | Tamanho/overlap | w-7 h-7 · border-2 border-[#0f0f0f] · -ml-2 |