Hover Card

from starhtml import *

Div(
    HoverCard(
        HoverCardTrigger(
            A("starui/components", href="#", cls="text-sm font-medium text-primary hover:underline"),
        ),
        HoverCardContent(
            Div(
                Div(
                    Icon("lucide:folder-git-2", cls="size-4 text-muted-foreground"),
                    H4("starui/components", cls="text-sm font-semibold text-primary"),
                    Badge("Public", variant="secondary", cls="ml-auto text-xs"),
                    cls="flex items-center gap-2",
                ),
                P(
                    "Beautifully designed components for building interfaces with StarHTML.",
                    cls="text-sm text-muted-foreground",
                ),
                Div(
                    Div(
                        Icon("lucide:star", cls="size-3.5 text-yellow-500"),
                        Span("2.1k", cls="text-sm font-medium"),
                        cls="flex items-center gap-1",
                    ),
                    Div(
                        Icon("lucide:git-fork", cls="size-3.5 text-muted-foreground"),
                        Span("184", cls="text-sm text-muted-foreground"),
                        cls="flex items-center gap-1",
                    ),
                    Div(
                        Div(cls="size-2.5 rounded-full bg-blue-500"),
                        Span("Python", cls="text-xs text-muted-foreground"),
                        cls="flex items-center gap-1",
                    ),
                    cls="flex items-center gap-4",
                ),
                cls="grid gap-3",
            ),
            side="top",
        ),
    ),
    cls="text-center",
)

from starhtml import *

Div(
    P(
        "The component system is built on top of ",
        HoverCard(
            HoverCardTrigger(
                A("StarHTML", href="#", cls="font-semibold text-primary hover:underline"),
            ),
            HoverCardContent(
                Div(
                    Div(
                        Icon("lucide:book-open", cls="size-4 text-muted-foreground"),
                        H4("StarHTML Framework", cls="text-sm font-semibold"),
                        cls="flex items-center gap-2",
                    ),
                    P(
                        "A Python framework for building modern web applications with server-side rendering and reactive components.",
                        cls="text-sm text-muted-foreground",
                    ),
                    A(
                        "View Documentation",
                        Icon("lucide:arrow-right", cls="size-3"),
                        href="#",
                        cls="inline-flex items-center gap-1 text-sm text-primary hover:underline",
                    ),
                    cls="grid gap-2",
                ),
                side="top",
            ),
        ),
        ", a modern Python web framework with reactive components and server-side rendering.",
        cls="max-w-lg text-sm leading-relaxed",
    ),
)

from starhtml import *

positions = [
    ("Top", "top", {}),
    ("Bottom", "bottom", {}),
    ("Left", "left", {}),
    ("Right", "right", {"align": "start"}),
]

def create_positioned_hover_card(label, side, extra_props):
    return HoverCard(
        HoverCardTrigger(Button(label, variant="outline", size="sm")),
        HoverCardContent(
            Div(
                H4(f"{label} placement", cls="text-sm font-semibold"),
                P(f"Content positioned to the {side} of the trigger.", cls="text-sm text-muted-foreground"),
                cls="grid gap-1",
            ),
            side=side,
            **extra_props,
        ),
    )

Div(
    Div(
        *[create_positioned_hover_card(label, side, extra_props)
          for label, side, extra_props in positions],
        cls="flex flex-wrap items-center justify-center gap-4",
    ),
    cls="py-8",
)