Drawer

from starhtml import *

demos = [
    ("bottom", "Share", "Send this to a friend or save for later."),
    ("right", "Filters", "Narrow down your search results."),
    ("top", "Updates", "2 items need your attention."),
    ("left", "Menu", "Jump to a different section."),
]

def make_drawer(d, title, desc):
    return Drawer(
        DrawerTrigger(title, variant="outline"),
        DrawerContent(
            DrawerHeader(
                DrawerTitle(title),
                DrawerDescription(desc),
            ),
            DrawerFooter(DrawerClose("Close", variant="outline")),
            direction=d,
        ),
    )

Div(
    *[make_drawer(*demo) for demo in demos],
    cls="flex flex-wrap justify-center gap-2",
)

from starhtml import *

items = [
    ("Espresso", "$4.50", Signal("dr_esp", True)),
    ("Almond croissant", "$3.00", Signal("dr_croi", True)),
    ("Fresh juice", "$5.50", Signal("dr_oj", False)),
]
sigs = [s for _, _, s in items]
count = sum(sigs)

Div(
    sigs,
    Drawer(
        DrawerTrigger(
            Icon("lucide:shopping-bag", cls="size-4"),
            Span(data_text=count, cls="text-xs"),
            variant="outline",
        ),
        DrawerContent(
            DrawerHeader(
                DrawerTitle("Your order"),
                DrawerDescription(
                    Span(data_text=count), " items",
                ),
            ),
            Div(
                *[
                    Div(
                        Div(
                            P(name, cls="text-sm font-medium"),
                            P(price, cls="text-xs text-muted-foreground"),
                        ),
                        Button(
                            Icon("lucide:x", cls="size-3"),
                            variant="ghost", size="icon",
                            cls="size-7 shrink-0",
                            data_on_click=sig.set(False),
                            aria_label=f"Remove {name}",
                        ),
                        data_show=sig,
                        cls="flex items-center justify-between rounded-md border p-2",
                    )
                    for name, price, sig in items
                ],
                P(
                    "Your order is empty",
                    data_show=count.eq(0),
                    cls="py-4 text-center text-sm text-muted-foreground",
                ),
                cls="space-y-2 px-4",
            ),
            DrawerFooter(
                Button(
                    "Checkout", cls="w-full",
                    data_attr_disabled=count.eq(0),
                ),
                Button(
                    "Reset order", variant="ghost", cls="w-full",
                    data_on_click=[s.set(True) for s in sigs],
                ),
            ),
        ),
    ),
)

from starhtml import *

Drawer(
    DrawerTrigger("Cookie Settings", variant="outline"),
    DrawerContent(
        DrawerHeader(
            DrawerTitle("Cookie preferences"),
            DrawerDescription(
                "We use cookies to keep things running and improve your experience."
            ),
        ),
        Div(
            P(
                "Essential cookies are always active. "
                "Accept all to enable analytics and personalization.",
                cls="text-sm text-muted-foreground",
            ),
            cls="px-4",
        ),
        DrawerFooter(
            DrawerClose("Accept all", variant="default", cls="w-full"),
            DrawerClose("Essential only", variant="outline", cls="w-full"),
        ),
        show_handle=False,
    ),
    dismissible=False,
)

from starhtml import *

Drawer(
    DrawerTrigger(
        Icon("lucide:music", cls="size-4"),
        "Now Playing",
        variant="outline",
    ),
    DrawerContent(
        DrawerHeader(
            DrawerTitle("Now playing"),
            DrawerDescription("Chet Baker — Almost Blue"),
        ),
        Div(
            Div(cls="mx-auto aspect-square w-48 rounded-md bg-muted"),
            Div(
                Button(
                    Icon("lucide:skip-back", cls="size-4"),
                    variant="ghost", size="icon",
                ),
                Button(
                    Icon("lucide:play", cls="size-5"),
                    variant="outline", size="icon", cls="size-10",
                ),
                Button(
                    Icon("lucide:skip-forward", cls="size-4"),
                    variant="ghost", size="icon",
                ),
                cls="flex items-center justify-center gap-4",
            ),
            cls="space-y-4 px-4",
        ),
        DrawerFooter(
            DrawerClose("Dismiss", variant="ghost", cls="w-full"),
        ),
        direction="right",
        show_close=True,
    ),
    modal=False,
)