Alert

from starhtml import *
from starui import *

Alert(
    Icon("lucide:terminal", cls="h-4 w-4"),
    AlertTitle("Heads up!"),
    AlertDescription("You can add components and dependencies to your app using the CLI.")
)

from starhtml import *
from starui import *

Alert(
    Icon("lucide:alert-circle", cls="h-4 w-4"),
    AlertTitle("Error occurred"),
    AlertDescription("Your session has expired. Please log in again."),
    variant="destructive"
)

from starhtml import *
from starui import *

Div(
    Alert(
        Icon("lucide:check-circle", cls="h-4 w-4 text-green-600"),
        AlertTitle("Success"),
        AlertDescription("Your account has been created successfully!")
    ),
    Alert(
        Icon("lucide:alert-triangle", cls="h-4 w-4 text-amber-600"),
        AlertTitle("Warning"),
        AlertDescription("This action cannot be undone. Please review carefully.")
    ),
    Alert(
        Icon("lucide:info", cls="h-4 w-4 text-blue-600"),
        AlertTitle("Information"),
        AlertDescription("New features are now available in your dashboard.")
    ),
    cls="space-y-4"
)

from starhtml import *
from starui import *

payment_checks = [
    "Verify your card details are correct",
    "Ensure you have sufficient funds",
    "Check that your billing address matches"
]

check_list = Ul(
    *[Li(check) for check in payment_checks],
    cls="mt-2 ml-6 list-disc space-y-1 text-sm"
)

Alert(
    Icon("lucide:alert-circle", cls="h-4 w-4"),
    AlertTitle("Unable to process payment"),
    AlertDescription(
        P("There was an issue processing your payment. Please check the following:"),
        check_list
    ),
    variant="destructive"
)

from starhtml import *
from starui import *

Alert(
    AlertTitle("Pro tip"),
    AlertDescription("You can use Ctrl+K to quickly search and navigate through the documentation.")
)