Separator

from starhtml import *
from starui import *

Div(
    Div(
        Div(
            H3("Getting Started", cls="text-lg font-semibold mb-2"),
            P("Learn the basics of using our platform with this comprehensive guide.", cls="text-sm text-muted-foreground mb-4"),
        ),
        Separator(cls="my-6"),
        Div(
            H3("Key Features", cls="text-lg font-semibold mb-2"),
            P("Discover the powerful features that make our platform unique.", cls="text-sm text-muted-foreground mb-4"),
        ),
        Separator(cls="my-6"),
        Div(
            H3("Additional Resources", cls="text-lg font-semibold mb-2"),
            P("Find helpful documentation, tutorials, and community support.", cls="text-sm text-muted-foreground"),
        ),
        cls="max-w-2xl p-6 border rounded-lg"
    )
)

from starhtml import *
from starui import *

Div(
    Div(
        Button(Icon("lucide:bold", cls="w-4 h-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:italic", cls="w-4 h-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:underline", cls="w-4 h-4"), variant="ghost", size="sm"),
        Separator(orientation="vertical", cls="mx-2 h-6"),
        Button(Icon("lucide:align-left", cls="w-4 h-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:align-center", cls="w-4 h-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:align-right", cls="w-4 h-4"), variant="ghost", size="sm"),
        Separator(orientation="vertical", cls="mx-2 h-6"),
        Button(Icon("lucide:list", cls="w-4 h-4"), variant="ghost", size="sm"),
        Button(Icon("lucide:list-ordered", cls="w-4 h-4"), variant="ghost", size="sm"),
        cls="flex items-center p-2 border rounded-lg"
    ),
    cls="flex justify-center"
)

from starhtml import *
from starui import *

Div(
    Div(
        Span("Home", cls="text-sm text-muted-foreground cursor-pointer hover:text-foreground"),
        Separator(orientation="vertical", cls="mx-2 h-4"),
        Span("Products", cls="text-sm text-muted-foreground cursor-pointer hover:text-foreground"),
        Separator(orientation="vertical", cls="mx-2 h-4"),
        Span("Electronics", cls="text-sm text-muted-foreground cursor-pointer hover:text-foreground"),
        Separator(orientation="vertical", cls="mx-2 h-4"),
        Span("Laptops", cls="text-sm font-medium"),
        cls="flex items-center"
    ),
    cls="p-4"
)

from starhtml import *
from starui import *

Div(
    Div(
        Div(
            P("Total Revenue", cls="text-sm text-muted-foreground"),
            P("$45,231.89", cls="text-2xl font-bold"),
            P("+20.1% from last month", cls="text-sm text-green-600"),
            cls="text-center"
        ),
        Separator(orientation="vertical", cls="mx-8 h-16"),
        Div(
            P("Subscriptions", cls="text-sm text-muted-foreground"),
            P("+2350", cls="text-2xl font-bold"),
            P("+180.1% from last month", cls="text-sm text-green-600"),
            cls="text-center"
        ),
        Separator(orientation="vertical", cls="mx-8 h-16"),
        Div(
            P("Sales", cls="text-sm text-muted-foreground"),
            P("+12,234", cls="text-2xl font-bold"),
            P("+19% from last month", cls="text-sm text-green-600"),
            cls="text-center"
        ),
        cls="flex items-center justify-center p-6 border rounded-lg"
    )
)

from starhtml import *
from starui import *

Div(
    Article(
        Header(
            H3("Getting Started with StarUI", cls="text-xl font-bold mb-2"),
            P("Learn how to build beautiful user interfaces", cls="text-muted-foreground"),
            Div(
                Badge("Tutorial"),
                Separator(orientation="vertical", cls="mx-2 h-4"),
                Badge("Beginner", variant="secondary"),
                Separator(orientation="vertical", cls="mx-2 h-4"),
                Span("5 min read", cls="text-sm text-muted-foreground"),
                cls="flex items-center mt-3"
            ),
            cls="mb-6"
        ),
        Separator(cls="mb-6"),
        Div(
            H4("Introduction", cls="font-semibold mb-3"),
            P("StarUI is a modern component library that makes it easy to build beautiful, accessible user interfaces.", cls="text-sm text-muted-foreground leading-relaxed"),
            cls="mb-6"
        ),
        Separator(cls="mb-6"),
        Div(
            H4("Quick Start", cls="font-semibold mb-3"),
            P("Get up and running in minutes with our simple installation process.", cls="text-sm text-muted-foreground leading-relaxed"),
            cls="mb-6"
        ),
        Separator(cls="mb-6"),
        Div(
            Span("Published on March 15, 2024", cls="text-xs text-muted-foreground"),
            Separator(orientation="vertical", cls="mx-3 h-6"),
            Span("Updated March 20, 2024", cls="text-xs text-muted-foreground"),
            cls="flex items-center mt-auto"
        ),
        cls="max-w-2xl p-6 border rounded-lg flex flex-col min-h-[300px]"
    )
)

from starhtml import *
from starui import *

separator_styles = [
    ("Default separator", ""),
    ("Thick separator", "h-0.5 bg-muted-foreground"),
    ("Colored separator", "bg-blue-500"),
    ("Dashed separator", "border-t border-dashed border-muted-foreground bg-transparent h-0"),
    ("Gradient separator", "bg-gradient-to-r from-transparent via-muted-foreground to-transparent")
]

def create_separator_demo(label, separator_cls):
    return Div(
        P(label, cls="text-center text-sm text-muted-foreground mb-2"),
        Separator(cls=separator_cls) if separator_cls else Separator()
    )

Div(
    H4("Custom Separator Styles", cls="text-center mb-6"),
    Div(
        *[create_separator_demo(label, cls_val) for label, cls_val in separator_styles],
        cls="space-y-6"
    ),
    cls="max-w-md mx-auto p-6 border rounded-lg"
)