Avatar

from starhtml import *
from starui import *

Div(
    Avatar(
        AvatarImage(
            src="https://github.com/shadcn.png",
            alt="@shadcn",
        )
    ),
    Avatar(
        AvatarFallback("CN")
    ),
    Avatar(
        AvatarImage(
            src="https://avatars.githubusercontent.com/u/1?v=4",
            alt="User",
        )
    ),
    cls="flex items-center gap-4"
)

from starhtml import *
from starui import *

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

size_avatars = [
    Avatar(AvatarFallback(label), cls=size_cls)
    for label, size_cls in sizes
]

Div(*size_avatars, cls="flex items-center gap-4")

from starhtml import *
from starui import *

Div(
    Avatar(AvatarFallback("CN")),
    Avatar(AvatarFallback("JD")),
    Avatar(AvatarFallback("AB")),
    cls="flex items-center gap-4"
)

from starhtml import *
from starui import *

examples = [
    ("https://github.com/shadcn.png", "@shadcn", "CN", "Valid URL"),
    ("https://invalid-url.com/image.jpg", "Invalid", "IN", "Invalid URL"),
    (None, None, "NI", "No URL")
]

avatar_demos = [
    Div(
        Avatar(
            AvatarImage(src=src, alt=alt) if src else None,
            AvatarFallback(fallback)
        ),
        P(description, cls="text-xs text-muted-foreground text-center mt-1"),
        cls="flex flex-col items-center"
    )
    for src, alt, fallback, description in examples
]

Div(*avatar_demos, cls="flex items-start gap-4")

from starhtml import *
from starui import *

Div(
    Avatar(AvatarFallback("JD")),
    Avatar(AvatarFallback("AS")),
    Avatar(AvatarFallback("PQ")),
    Avatar(AvatarFallback("+2", cls="text-xs font-medium")),
    cls="flex -space-x-2 [&>*[data-slot=avatar]]:ring-2 [&>*[data-slot=avatar]]:ring-background"
)

from starhtml import *
from starui import *

def create_status_avatar(initials, badge_color):
    avatar = Avatar(AvatarFallback(initials))
    badge = Span(cls=f"absolute bottom-0 right-0 size-3 {badge_color} rounded-full ring-2 ring-background")
    return Div(avatar, badge, cls="relative inline-block")

def create_count_avatar(initials, count):
    avatar = Avatar(AvatarFallback(initials))
    badge = Span(count, cls="absolute bottom-0 right-0 size-4 bg-red-500 rounded-full ring-2 ring-background flex items-center justify-center text-[8px] font-bold text-white")
    return Div(avatar, badge, cls="relative inline-block")

Div(
    create_status_avatar("JD", "bg-green-500"),
    create_status_avatar("AS", "bg-red-500"),
    create_status_avatar("PQ", "bg-yellow-500"),
    create_count_avatar("MN", "5"),
    cls="flex items-center gap-4"
)

from starhtml import *
from starui import *

avatars = [
    ("JD", "red"),
    ("AS", "blue"),
    ("PQ", "green"),
    ("MN", "purple"),
    ("XY", "orange")
]

colored_avatars = [
    Avatar(AvatarFallback(initials, cls=f"bg-{color}-600 dark:bg-{color}-500 text-white font-semibold"))
    for initials, color in avatars
]

Div(*colored_avatars, cls="flex items-center gap-4")