from starhtml import *

Card(
    CardHeader(
        CardTitle("Team Members"),
        CardDescription("Manage access and permissions"),
        CardAction(
            DropdownMenu(
                DropdownMenuTrigger(
                    Icon("lucide:ellipsis", cls="h-4 w-4"),
                    variant="ghost",
                    size="icon",
                    cls="h-7 w-7",
                    aria_label="Team options",
                ),
                DropdownMenuContent(
                    DropdownMenuItem(Icon("lucide:user-plus", cls="h-4 w-4"), "Invite member"),
                    DropdownMenuItem(Icon("lucide:settings", cls="h-4 w-4"), "Settings"),
                    DropdownMenuSeparator(),
                    DropdownMenuItem(Icon("lucide:archive", cls="h-4 w-4"), "Archive team"),
                ),
            )
        ),
    ),
    CardContent(
        P("3 active members with admin, editor, and viewer roles assigned.")
    ),
    cls="w-full max-w-md",
)

from starhtml import *

rows = [
    ("Pro Plan", "$29/mo"),
    ("API Calls", "12,847"),
    ("Storage", "4.2 GB"),
]
Card(
    CardHeader(
        CardTitle("Billing Summary"),
        CardDescription("Current period usage"),
        cls="border-b",
    ),
    CardContent(
        Div(
            *[
                Div(
                    Span(label, cls="text-sm"),
                    Span(value, cls="text-sm font-medium"),
                    cls="flex justify-between",
                )
                for label, value in rows
            ],
            Div(
                Span("Total", cls="text-sm font-medium"),
                Span("$29/mo", cls="text-sm font-bold"),
                cls="mt-2 flex justify-between border-t pt-2",
            ),
            cls="space-y-2",
        )
    ),
    CardFooter(
        Button("Download Invoice", variant="outline", cls="w-full"),
        cls="border-t",
    ),
    cls="w-full max-w-sm",
)

from starhtml import *

Card(
    Div(
        Icon("lucide:image", cls="h-12 w-12 text-muted-foreground/20"),
        cls="flex h-48 items-center justify-center bg-muted",
    ),
    CardHeader(
        Div(
            Badge("Featured"),
            Badge("Tutorial", variant="outline"),
            cls="flex gap-2",
        ),
        CardTitle("Getting Started with StarUI"),
        CardDescription("Learn to build accessible interfaces in under 10 minutes."),
    ),
    CardFooter(
        Button(Icon("lucide:book-open", cls="h-4 w-4"), "Read More", variant="outline"),
    ),
    cls="w-full max-w-sm overflow-hidden",
)

from starhtml import *

Div(
    Card(
        CardHeader(
            CardTitle("Page Title", level="h1", cls="text-2xl"),
            CardDescription("level='h1' for standalone page cards"),
        ),
        CardContent(
            P("Use h1 for the primary card on a page, such as a dashboard hero or profile header.", cls="text-sm text-muted-foreground")
        ),
    ),
    Card(
        CardHeader(
            CardTitle("Section Heading", level="h2", cls="text-xl"),
            CardDescription("level='h2' for section-level cards"),
        ),
        CardContent(
            P("Defaults to h3, suitable for most card grids.", cls="text-sm text-muted-foreground")
        ),
    ),
    cls="grid w-full max-w-2xl grid-cols-1 gap-4 md:grid-cols-2",
)

from starhtml import *

notifications = Signal("card_settings_notifications", True)
marketing = Signal("card_settings_marketing", False)
updates = Signal("card_settings_updates", True)

Card(
    notifications,
    marketing,
    updates,
    CardHeader(
        CardTitle("Notifications"),
        CardDescription("Choose which notifications you receive"),
        cls="border-b",
    ),
    CardContent(
        Div(
            SwitchWithLabel(
                label="Push notifications",
                signal=notifications,
                helper_text="Receive alerts on your device",
            ),
            SwitchWithLabel(
                label="Marketing emails",
                signal=marketing,
                helper_text="Product news and special offers",
            ),
            SwitchWithLabel(
                label="Product updates",
                signal=updates,
                helper_text="New features and changelog",
            ),
            cls="space-y-4",
        )
    ),
    CardFooter(
        Button("Save preferences", cls="w-full"),
        cls="border-t",
    ),
    cls="w-full max-w-md",
)

from starhtml import *

period = Signal("card_period", "month")

revenue = match(period, week="$4.2k", month="$18.7k", quarter="$54.1k")
users = match(period, week="89", month="342", quarter="1,204")
growth = match(period, week="+12%", month="+28%", quarter="+64%")

def PeriodButton(label, value):
    return Button(
        label, size="sm",
        data_attr_variant=period.eq(value).if_("default", "outline"),
        data_on_click=period.set(value),
    )

rows = [
    ("Revenue", revenue),
    ("New users", users),
    ("Growth", growth),
]

Div(
    period,
    Card(
        CardHeader(
            CardTitle("Analytics"),
            CardDescription("Deployment performance by period"),
        ),
        Div(
            PeriodButton("Week", "week"),
            PeriodButton("Month", "month"),
            PeriodButton("Quarter", "quarter"),
            cls="flex gap-1 border-b px-6 pb-4",
        ),
        CardContent(
            Div(
                *[
                    Div(
                        Span(label, cls="text-sm text-muted-foreground"),
                        Span(data_text=val, cls="text-sm font-medium tabular-nums"),
                        cls="flex justify-between",
                    )
                    for label, val in rows
                ],
                cls="space-y-3",
            ),
        ),
        cls="w-full max-w-sm",
    ),
)