Pager

import ui/theme.qwe use theme_cssuse ui/pager.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view PagerDemo() =    <div.demo-stack style="gap: 24px">        <Pager prev={{ title: "Installing Quillo", href: "#pager-install", hint: "Chapter 1" }}               next={{ title: "Your first program, with routes and views", href: "#pager-first", hint: "Chapter 3 · 12 min" }}/>        <Pager next={{ title: "Getting started", href: "#pager-start" }} next_label="Start reading"/>        <Pager prev={{ title: "Deploying", href: "#pager-deploy" }} prev_label="Back to"/>    </div>

// Pager: the links to the previous and next page of a sequence, each with its title,// at the bottom of an article, a guide's chapter or a docs page.////   <Pager prev={{ title: "Installing", href: "/docs/install" }}//          next={{ title: "Your first program", href: "/docs/first" }}/>//   <Pager next={{ title: "Chapter 2", href: "/book/2", hint: "12 min" }}/>//// prev, next: { title, href, hint? }; leave one out at the start or the end, and the// other keeps its side. hint: a quieter line under the title (a time, a section).// prev_label, next_label: the small words above the titles ("Previous", "Next").// label: what screen readers call it ("Pages").import ui/theme.qwe use ui_clslet pager_css = css`.ui-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }.ui-pager-link {  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-border);  border-radius: var(--ui-radius); background: var(--ui-surface); color: inherit; text-decoration: none;  transition: border-color .15s, background .15s;}.ui-pager-link:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }.ui-pager-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-pager-next { grid-column: 2; text-align: right; flex-direction: row-reverse; }.ui-pager-text { display: grid; gap: 1px; min-width: 0; }.ui-pager-word { color: var(--ui-muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }.ui-pager-title { font-weight: 600; color: var(--ui-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ui-pager-link:hover .ui-pager-title { color: var(--ui-accent); }.ui-pager-hint { color: var(--ui-muted); font-size: 13px; }.ui-pager-arrow { flex: none; width: 18px; height: 18px; color: var(--ui-muted); }.ui-pager-link:hover .ui-pager-arrow { color: var(--ui-accent); }@media (max-width: 520px) {  .ui-pager { grid-template-columns: 1fr; }  .ui-pager-next { grid-column: 1; }}@media (prefers-reduced-motion: reduce) { .ui-pager-link { transition: none; } }`fn pager_link(page, word: str, next: bool) =    <a class={ui_cls(["ui-pager-link", next ? "ui-pager-next" : "ui-pager-prev"])} href={page.href} rel={next ? "next" : "prev"}>        <svg.ui-pager-arrow viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"             stroke-linejoin="round" aria-hidden="true"><path d={next ? "M5 12h14M13 6l6 6-6 6" : "M19 12H5M11 6l-6 6 6 6"}/></svg>        <span.ui-pager-text>            <span.ui-pager-word>{word}</span>            <span.ui-pager-title>{page.title}</span>            {get(page, "hint") != null && <span.ui-pager-hint>{page.hint}</span>}        </span>    </a>view Pager(prev: map? = null, next: map? = null, prev_label: str = "Previous", next_label: str = "Next",           label: str = "Pages", class: str? = null) {    style global pager_css    <nav class={ui_cls(["ui-pager", class])} aria-label={label}>        {prev != null && pager_link(prev, prev_label, false)}        {next != null && pager_link(next, next_label, true)}    </nav>}