UserAvatar

Visão Geral

Componente de avatar de usuário. Exibe a foto do usuário se disponível; caso contrário, renderiza um círculo colorido com as iniciais do nome.

Localização

frontend-react/src/components/ui/UserAvatar.tsx

Props

Prop	Tipo	Padrão	Descrição
user	{ name: string; avatar?: string }	—	Dados do usuário
size	'sm' | 'md'	'sm'	Tamanho do avatar

Tamanhos

Valor	Dimensões	Tamanho do texto
sm	w-7 h-7 (28px)	text-xs
md	w-9 h-9 (36px)	text-sm

Comportamento

Com imagem

Se user.avatar está definido e carrega sem erro, exibe <img> com ring-1 ring-white/30.

Fallback (iniciais)

Se não há avatar ou a imagem falha ao carregar:

1. Extrai as iniciais (até 2 palavras, primeira letra maiúscula)
2. Determina a cor de fundo de forma determinística via hash do nome
3. Exibe círculo colorido com as iniciais em branco

Paleta de Cores

7 cores determinísticas baseadas na soma dos char codes do nome:

amber-600 | emerald-600 | sky-600 | violet-600 | rose-600 | teal-600 | orange-600

O mesmo nome sempre recebe a mesma cor.

Uso

import UserAvatar from '@/components/ui/UserAvatar';

// Tamanho padrão (sm)
<UserAvatar user={currentUser} />

// Tamanho médio
<UserAvatar user={currentUser} size="md" />

Exemplo de Iniciais

Nome	Iniciais
João Silva	JS
Maria	M
Ana Paula Souza	AP