Componentes
Avatar
Representação visual do usuário. Sempre circular. Dois estados: foto de perfil ou fallback com inicial do nome em fundo verde.
Visão geral
Com foto
A
Fallback
Com foto
Imagem de perfil carregada do Supabase Storage. object-cover preenche o círculo sem distorcer.
Fallback
Quando não há foto. Primeira letra do display_name em fundo verde. Nunca exibe imagem quebrada.
Anatomia
1
2
A
ale_faria
@ale_faria · 2 min
A
1
Container
rounded-full · tamanho fixo por contexto · overflow-hidden flex-shrink-0
2
Conteúdo: foto ou inicial
Foto: w-full h-full object-cover · Fallback: bg-[#C8F53C] text-[#0f0f0f] font-bold
Tamanhos e contextos
w-6 · 24px
A
Avatares empilhados no GroupedFeedCard (com
border-2 border-[#0f0f0f] e margin-left:-8px)w-8 · 32px
A
Tab de Perfil na navegação inferior · comentários em lista
w-9 · 36px
A
Cabeçalho do Feed Card (autor do post)
w-12 · 48px
A
Card de perfil na tela de busca · lista de seguidores
w-16 · 64px
A
Tela de Perfil do usuário (hero)
Do / Don't
A
ale_faria
@ale_faria
Faça
Sempre exiba fallback com inicial. Nunca deixe o espaço vazio ou com imagem quebrada.
?
ale_faria
@ale_faria
Evite
Placeholder genérico ou espaço vazio quando não há foto quebram a identidade visual.
A
Feed Card — w-9 (36px)
A
Perfil — w-16 (64px)
Faça
Use o tamanho correto para cada contexto. Tamanhos maiores são para destaque (perfil), menores para listas.
A
M
Evite
Avatares grandes (w-16) em listas ou feeds. Compete com o conteúdo principal.
Specs
| Propriedade | Com foto | Fallback |
|---|---|---|
| Forma | rounded-full (9999px) | |
| Background | — | #C8F53C |
| Cor da inicial | — | #0f0f0f |
| Font weight inicial | — | 700 (bold) |
| Imagem | object-cover w-full h-full | — |
| overflow | overflow-hidden | |
| flex-shrink | flex-shrink-0 (sempre) | |
| Tamanhos | 24 · 32 · 36 · 48 · 64 px | |
| Empilhado (grouped) | border-2 border-[#0f0f0f] · -ml-2 · z-index decrescente | |