Avatar

Apresentação

O componente Avatar é responsável por exibir avatares de usuários na interface, podendo ser usados para representar perfis, contatos ou qualquer outra representação visual de usuário.

Quando usar

• Para exibir fotos de perfil de usuários
• Para representar contatos em listas
• Quando precisar de uma representação visual padronizada de usuários
• Para exibir avatares em grupos (usando AvatarGroup)

Forma básica de uso

import { Avatar } from 'eitri-luminus';

// Avatar básico
<Avatar>
  <Avatar.Image
    src="/caminho/do/avatar.jpg"
    alt="Nome do usuário"
  />
</Avatar>

// Avatar com tamanho personalizado
<Avatar>
  <Avatar.Image
    src="/caminho/do/avatar.jpg"
    alt="Nome do usuário"
    className="w-32"
  />
</Avatar>

Propriedades

Avatar

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

Avatar.Image

Propriedade	Tipo	Descrição
src	string	URL da imagem do avatar
alt	string	Texto alternativo para acessibilidade
className	string	Classes CSS adicionais para a imagem

Heranças

O componente Avatar herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente tem um tamanho padrão de 24 unidades (w-24)
• É possível personalizar o tamanho usando classes de largura do Tailwind
• O componente suporta imagens em diferentes formatos (JPG, PNG, WebP, etc)
• Recomenda-se sempre fornecer um texto alternativo para acessibilidade
• O componente é responsivo por padrão