Componentes
Card
Cinco variantes de card. Cada uma tem contexto e grid próprios. Todas usam bg-[#1a1a1a] como superfície base.
Anatomia · Card de Álbum
Container do card
Div sem superfície própria. Largura relativa ao grid: w-full em grid, w-36 em scroll horizontal.
Capa (thumbnail)
aspect-square rounded-xl overflow-hidden. Aceita overlays absolute como badge e like.
Badge de nota
absolute bottom-1.5 left-1.5 bg-black/70 backdrop-blur-sm. Visível sobre qualquer capa. Opcional — omitido se sem avaliação.
Textos
Título font-semibold text-[#f5f5f5] truncate + artista text-[#888]. Postagens (se aplicável) em text-[#C8F53C].
Card de álbum
Grid e scroll horizontal na Home, Listas e Coleção. Thumbnail quadrado com badge de nota e indicador de like opcionais.
Pink Floyd
Miles Davis
Michael Jackson
Nas
14 postagens
Container de capa
rounded-xl overflow-hidden aspect-square
(w-36 em scroll horizontal, w-full em grid)
Badge de nota
absolute bottom-1.5 left-1.5
bg-black/70 backdrop-blur-sm
rounded px-1.5 py-0.5
text-[#C8F53C] text-[11px] font-bold
Indicador de curtida
absolute top-1.5 right-1.5
heart fill="#C8F53C" w-3.5 h-3.5
drop-shadow para visibilidade sobre capa
Textos
álbum: font-semibold text-sm text-[#f5f5f5] mt-2
truncate (overflow-hidden text-ellipsis)
artista: text-xs text-[#888] mt-0.5
postagens: text-xs text-[#C8F53C] mt-0.5
Usos do card de álbum
Scroll horizontal (w-36 flex-shrink-0) na Home. Grid 3 colunas na Coleção. Grid 2 colunas em Listas. Badge e like são condicionais.
Card Hero
Destaque do último disco adicionado no topo da Home. Thumbnail 96×96, layout horizontal, artista em verde.
1973
Container
bg-[#1a1a1a] rounded-2xl p-3
flex items-center gap-4
w-[calc(100%-32px)]
Thumbnail
w-24 h-24 rounded-xl flex-shrink-0
Eyebrow
text-[#C8F53C] text-[10px] font-bold uppercase tracking-wide
Artista
text-[#C8F53C] text-sm (destaque único no texto)
Card de gênero
Carrossel "Por gênero" na Home. Gradiente do parent_genre, label e contagem sobre overlay escuro.
Dimensões
w-36 h-24 (144×96px)
rounded-xl overflow-hidden relative
Fundo
gradientStyle(parent_genre) → inline style
origem: genreColors.ts
Overlay + texto
absolute inset-0 p-3
bg-gradient-to-t from-black/50 to-transparent
subgênero: text-white font-bold text-sm
contagem: text-white/55 text-xs mt-0.5
Item de lista
View de lista da Coleção e Listas. Thumbnail 48×48 à direita, dados do álbum à esquerda.
Container do item
button w-full flex items-center gap-3
px-4 py-3 text-left active:bg-[#111]
Divisor
divide-y divide-[#1a1a1a]
(no container pai, não em cada item)
Thumbnail
w-12 h-12 rounded-lg object-cover flex-shrink-0
(à direita — order ou flex-row-reverse)
Textos
álbum: font-semibold text-sm text-[#f5f5f5] truncate
artista: text-xs text-[#888] mt-0.5
ano: text-xs text-[#888] mt-0.5
Do / Don't
bg-black/70 backdrop-blur-sm. Legível sobre qualquer capa ou gradiente.
Card de álbum → grid ou scroll
Item de lista → view lista
Hero → destaque único no topo
Gênero → carrossel por tipo
Artista em #f5f5f5
Artista em #C8F53C em todo card
#C8F53C) é exclusivo do Card Hero. Em outros cards, artista é #888.
Specs
| Variante | Dimensão | Border radius | Contexto |
|---|---|---|---|
| Álbum — grid | w-full aspect-square |
rounded-xl 12px |
Grade 2–3 colunas em Listas/Coleção |
| Álbum — scroll | w-36 h-36 |
rounded-xl 12px |
Scroll horizontal na Home |
| Hero | Full width -32px · h-24 (conteúdo) |
rounded-2xl 16px |
Único destaque no topo da Home |
| Gênero | w-36 h-24 (144×96px) |
rounded-xl 12px |
Carrossel "Por gênero" na Home |
| Item de lista | Full width · py-3 |
— | View lista da Coleção e Listas |
| Elemento comum | Valor |
|---|---|
| Superfície de card | #1a1a1a · cards de notícia: #111 (sobre surface1) |
| Thumbnail | rounded-xl (12px) para capas de álbum · rounded-lg (8px) para thumbnails em lista |
| Texto primário | text-[#f5f5f5] font-semibold |
| Texto secundário | text-[#888] |
| Artista em destaque | text-[#C8F53C] — exclusivo do Card Hero |
| Badge de nota | bg-black/70 backdrop-blur-sm rounded px-1.5 py-0.5 text-[#C8F53C] text-[11px] font-bold |