Avatar

Avatars são espaços reservados visuais para representar usuários ou entidades. Podem conter imagens ou iniciais e são comumente usados em cabeçalhos, listas e em qualquer lugar onde informações do usuário são apresentadas.

Avatar com imagem

A prop src especifica a URL da imagem para o avatar.

import React from "react";
import { Avatar } from "@firecms/ui";

export default function AvatarImageDemo() {
    return (
        <Avatar
            src="https://avatars.githubusercontent.com/u/5120271?v=4"
            alt="User Name"
        />
    );
}

Avatar com texto

Quando a prop src não é fornecida, o avatar pode exibir texto como as iniciais do usuário.

import React from "react";
import { Avatar } from "@firecms/ui";

export default function AvatarTextDemo() {
    return (
        <Avatar>
            AB
        </Avatar>
    );
}

Estilo personalizado

A prop className permite que você passe classes CSS personalizadas para o componente avatar.

import React from "react";
import { Avatar } from "@firecms/ui";

export default function CustomStyleAvatarDemo() {
    return (
        <Avatar
            className="bg-red-500 dark:bg-red-700"
            // Example of custom size
            style={{ width: '80px', height: '80px' }}
        >
            CD
        </Avatar>
    );
}