Avatar

Gli Avatar sono segnaposto visivi per rappresentare utenti o entità. Possono contenere immagini o iniziali e sono comunemente usati in intestazioni, liste e ovunque vengano presentate informazioni sull’utente.

Avatar con immagine

La prop src specifica l’URL dell’immagine per l’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 con testo

Quando la prop src non viene fornita, l’avatar può mostrare del testo come le iniziali dell’utente.

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

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

Stile personalizzato

La prop className ti consente di passare classi CSS personalizzate al 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>
    );
}