class Phone(ClientState):
tab: str = field(default="home")
def phone_app() -> None:
phone = Phone()
with ui.vstack(gap="none", classes="h-[32rem] w-full max-w-sm overflow-hidden "
"rounded-box border border-text/10"):
with ui.pane(padding="md", gap="md"):
with ui.vstack(gap="md", visible=phone.tab == "home"):
ui.heading("Today", level=3, size="xl")
for place, when, photo in (
("Café Lumière", "Table for 2 · 19:30", "cafe"),
("Studio Pilates", "Class · Tomorrow 08:00", "yoga"),
("Barber & Co", "Haircut · Friday 17:15", "barber"),
):
with ui.card(padding="sm"), ui.hstack(gap="sm"):
ui.image(src=f"https://picsum.photos/seed/{photo}/96/96",
alt=place, classes="size-12 shrink-0")
with ui.vstack(gap="none"):
ui.text(place, weight="medium")
ui.text(when, color="muted", size="sm")
with ui.vstack(gap="sm", visible=phone.tab == "search"):
ui.heading("Search", level=3, size="xl")
ui.input(placeholder="Restaurants, classes, salons…",
icon_left="search")
with ui.vstack(gap="sm", visible=phone.tab == "inbox"):
ui.heading("Inbox", level=3, size="xl")
ui.text("Café Lumière confirmed your table for tonight.",
color="muted")
with ui.vstack(gap="sm", visible=phone.tab == "profile"):
ui.heading("Profile", level=3, size="xl")
ui.text("Ada Lovelace · member since 2021", color="muted")
with ui.bottom_bar():
ui.bottom_bar_item("Home", icon="house", active=phone.tab == "home",
on_click=phone.tab.set("home"))
ui.bottom_bar_item("Search", icon="search",
active=phone.tab == "search",
on_click=phone.tab.set("search"))
ui.bottom_bar_item("Inbox", icon="inbox", badge=2,
active=phone.tab == "inbox",
on_click=phone.tab.set("inbox"))
ui.bottom_bar_item("Profile", icon="user",
active=phone.tab == "profile",
on_click=phone.tab.set("profile"))