Avatar

Los avatares son marcadores de posición visuales para representar usuarios o entidades. Pueden contener imágenes o iniciales y se utilizan comúnmente en encabezados, listas y en cualquier lugar donde se presente información del usuario.

Avatar de imagen (Image Avatar)

La prop src especifica la URL de la imagen para el 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 de texto (Text Avatar)

Cuando no se proporciona la prop src, el avatar puede mostrar texto como las iniciales del usuario.

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

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

Estilos personalizados (Custom Styling)

La prop className te permite pasar clases CSS personalizadas al componente de 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>
    );
}