Badge

from starhtml import *
from starui import *

Div(
    Badge("Badge"),
    Badge("Secondary", variant="secondary"),
    Badge("Destructive", variant="destructive"),
    Badge("Outline", variant="outline"),
    cls="flex flex-wrap gap-2"
)

from starhtml import *
from starui import *

Div(
    Badge(Icon("lucide:star", cls="w-3 h-3"), "Featured"),
    Badge(Div(cls="w-2 h-2 bg-green-500 rounded-full"), "Online", variant="outline"),
    cls="flex gap-2"
)

from starhtml import *
from starui import *

Div(
    Badge("99+", variant="destructive"),
    Badge("v2.1.0", variant="secondary"),
    Badge("NEW"),
    cls="flex gap-2"
)

from starhtml import *
from starui import *

Div(
    Badge("Documentation", href="/docs", variant="outline"),
    Badge(Icon("lucide:external-link", cls="w-3 h-3"), "GitHub", href="https://github.com", variant="secondary"),
    cls="flex gap-2"
)

from starhtml import *
from starui import *

Div(
    Badge("Active"),
    Badge("Pending", variant="secondary"),
    Badge("Error", variant="destructive"),
    Badge("Draft", variant="outline"),
    cls="flex gap-2 flex-wrap"
)

from starhtml import *
from starui import *

technologies = ["React", "TypeScript", "Next.js", "TailwindCSS"]
Div(
    *[Badge(tech, variant="outline") for tech in technologies],
    cls="flex gap-2 flex-wrap"
)

from starhtml import *
from starui import *

notifications = [
    ("lucide:bell", "3", "bg-destructive text-destructive-foreground", "min-w-[1.25rem]"),
    ("lucide:mail", "12", "bg-primary text-primary-foreground", "min-w-[1.25rem]"),
    ("lucide:inbox", "99+", "bg-destructive text-destructive-foreground", "min-w-[1.5rem]")
]

def create_notification_icon(icon_name, count, badge_color, badge_width):
    icon = Icon(icon_name, cls="h-10 w-10 text-muted-foreground block")
    badge = Span(count, cls=f"absolute -top-1 -right-1 z-10 {badge_width} h-5 px-1 rounded-full {badge_color} text-xs font-bold flex items-center justify-center ring-2 ring-background")
    return Div(icon, badge, cls="relative inline-block")

notification_icons = [create_notification_icon(*notification) for notification in notifications]

Div(*notification_icons, cls="flex items-center gap-8")

from starhtml import *
from starui import *

def create_avatar(initials, bg_color):
    return Div(initials, cls=f"size-10 rounded-full {bg_color} flex items-center justify-center text-white font-semibold text-sm")

def create_count_badge(count):
    return Span(count, cls="absolute -top-1 -right-1 size-4 rounded-full bg-red-500 text-white text-xs font-bold flex items-center justify-center ring-2 ring-white")

def create_status_indicator(color):
    return Span(cls=f"absolute bottom-0 right-0 size-3 rounded-full {color} shadow-[0_0_0_2px_theme(colors.background)]")

def create_verified_badge():
    check_icon = Icon("lucide:check", cls="h-3 w-3 text-white font-bold")
    return Span(check_icon, cls="absolute -bottom-0.5 -right-0.5 size-4 rounded-full bg-blue-600 flex items-center justify-center shadow-[0_0_0_2px_theme(colors.background)]")

avatars = [
    Div(create_avatar("JD", "bg-blue-500"), create_count_badge("3"), cls="relative inline-block"),
    Div(create_avatar("AS", "bg-green-500"), create_status_indicator("bg-green-400"), cls="relative inline-block"),
    Div(create_avatar("MK", "bg-orange-500"), create_status_indicator("bg-orange-400"), cls="relative inline-block"),
    Div(create_avatar("VU", "bg-purple-500"), create_verified_badge(), cls="relative inline-block")
]

Div(*avatars, cls="flex items-center gap-8")

from starhtml import *
from starui import *

Div(
    Badge("Small", cls="px-1.5 py-0.5 text-xs"),
    Badge("Default", cls="px-2 py-0.5 text-xs"),
    Badge("Large", cls="px-3 py-1 text-sm"),
    cls="flex gap-2 items-center"
)