Avatar

from starhtml import *

sizes = [
    ("XS", "size-6"),
    ("SM", "size-8"),
    ("MD", ""),
    ("LG", "size-12"),
    ("XL", "size-16"),
    ("2X", "size-20")
]

Div(
    *[Avatar(AvatarFallback(label), cls=size_cls) for label, size_cls in sizes],
    cls="flex items-center gap-4"
)

from starhtml import *

examples = [
    ("https://avatars.githubusercontent.com/u/25?v=4", "James Chen", "JC", "Valid URL"),
    ("https://invalid-url.example.com/missing.jpg", "Dev Patel", "DP", "Broken URL"),
    (None, None, "AR", "No image"),
]

Div(
    *[Div(
        Avatar(
            AvatarImage(src=src, alt=alt) if src else None,
            AvatarFallback(initials)
        ),
        P(label, cls="mt-1 text-center text-xs text-muted-foreground"),
        cls="flex flex-col items-center"
    ) for src, alt, initials, label in examples],
    cls="flex items-start gap-6"
)

from starhtml import *

def with_status(initials, color, label):
    return Div(
        Avatar(AvatarFallback(initials)),
        Span(
            cls=f"absolute bottom-0 right-0 size-3 {color} rounded-full ring-2 ring-background",
            role="status",
            aria_label=label,
        ),
        cls="relative inline-block"
    )

def with_count(src, alt, initials, count):
    return Div(
        Avatar(
            AvatarImage(src=src, alt=alt),
            AvatarFallback(initials)
        ),
        Span(
            str(count),
            cls="absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white ring-2 ring-background",
            role="status",
            aria_label=f"{count} notifications",
        ),
        cls="relative inline-block"
    )

Div(
    with_status("SM", "bg-green-500", "Online"),
    with_status("JC", "bg-red-500", "Busy"),
    with_status("AR", "bg-yellow-500", "Away"),
    with_count(
        "https://avatars.githubusercontent.com/u/1024025?v=4",
        "Sarah Miller", "SM", 3
    ),
    cls="flex items-center gap-5"
)

from starhtml import *

members = [
    ("https://avatars.githubusercontent.com/u/25?v=4", "James Chen", "JC"),
    ("https://avatars.githubusercontent.com/u/1024025?v=4", "Sarah Miller", "SM"),
    (None, "Ava Rodriguez", "AR"),
    (None, "Tom Kim", "TK"),
]

Div(
    *[Avatar(
        AvatarImage(src=src, alt=name) if src else None,
        AvatarFallback(initials, cls="text-xs")
    ) for src, name, initials in members],
    Avatar(AvatarFallback("+3", cls="text-xs font-medium")),
    cls="flex -space-x-3 [&>*[data-slot=avatar]]:ring-2 [&>*[data-slot=avatar]]:ring-background [&>*[data-slot=avatar]]:size-9"
)

from starhtml import *

def profile_row(src, alt, initials, name, detail, color=""):
    return Div(
        Avatar(
            AvatarImage(src=src, alt=alt) if src else None,
            AvatarFallback(initials, cls=f"{color} text-white font-semibold" if color else "")
        ),
        Div(
            P(name, cls="text-sm leading-none font-medium"),
            P(detail, cls="text-sm text-muted-foreground"),
            cls="space-y-1"
        ),
        cls="flex items-center gap-3"
    )

Div(
    profile_row(
        "https://avatars.githubusercontent.com/u/25?v=4",
        "James Chen", "JC",
        "James Chen", "[email protected]"
    ),
    profile_row(
        None, None, "AR",
        "Ava Rodriguez", "Engineering Lead",
        color="bg-red-600 dark:bg-red-500"
    ),
    profile_row(
        None, None, "TK",
        "Tom Kim", "Last active 2 hours ago",
        color="bg-blue-600 dark:bg-blue-500"
    ),
    cls="space-y-4"
)