/// TEMPORARY AI GENERATED FRONTEND \\\
///   NOT TO BE USED IN PRODUCTION  \\\

import { Theme } from "../theme.slint";

// Coloured circle with an initial. Real avatar images (mxc:// media) are a
// planned follow-up; this is also the fallback when a user has no avatar.
export component Avatar inherits Rectangle {
    in property <string> initial;
    in property <color> tint: Theme.accent;
    in property <length> diameter: 40px;

    width: diameter;
    height: diameter;
    border-radius: diameter / 2;
    background: tint;

    Text {
        text: root.initial;
        color: white;
        font-size: root.diameter * 0.42;
        font-weight: 600;
        horizontal-alignment: center;
        vertical-alignment: center;
    }
}