DownloadButton

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

view DownloadButtonDemo() =    <div.demo-stack>        <div.demo-row>            <DownloadButton id="dl-demo-report" href="https://quillolang.org/components/quillo-ui.qwe" filename="report.pdf" bytes={1843200}/>            <DownloadButton href="https://quillolang.org/components/quillo-ui.qwe" filename="orders.csv" bytes={52000} label="Export orders" variant="solid"/>            <DownloadButton href="https://quillolang.org/components/quillo-ui.qwe" kind="ZIP" bytes={2254857830} label="Source" variant="soft" tone="neutral"/>        </div>        <div.demo-row>            <DownloadButton href="/files/photo.jpg" bytes={820} size="sm"/>            <DownloadButton href="/files/notes.txt" label="Notes" variant="ghost"/>            <DownloadButton href="/export?format=csv" filename="people.csv" label="Export" size="lg" tone="danger"/>        </div>    </div>

// DownloadButton: a link that downloads a file rather than opening it, saying what// kind of file it is and how big, so nobody is surprised by a 40 MB PDF.////   <DownloadButton href="/files/report.pdf" bytes={1843200}/>//   <DownloadButton href="/export?format=csv" filename="orders.csv" bytes={52000} label="Export orders" variant="solid"/>//// href: the file. filename: the name it is saved as (the browser's choice, from the// URL, when left out); its ending names the kind. kind: the kind written out instead// ("PDF", "ZIP"; else from the ending of filename or href, in capitals). bytes: the// file's size, shown as KB, MB or GB; left out, only the kind shows.// label ("Download"): the button's text. variant: "outline" (default), "soft", "ghost"// or "solid"; tone: "accent" (default), "neutral" or "danger"; size: "sm", "md" or "lg".// It is styled as a Button when button_css is on the page. id: the link's id.import ui/theme.qwe use ui_clslet download_button_css = css`.ui-download-button { gap: 8px; }.ui-download-button svg { flex: none; width: 16px; height: 16px; }.ui-download-button-meta { opacity: .75; font-weight: 400; font-size: .92em; }.ui-download-button-meta::before { content: "·"; margin-right: 8px; }.ui-download-button.ui-btn-sm .ui-download-button-meta::before { margin-right: 6px; }`// The size as people read it: "820 B", "1.2 KB", "4.5 MB", "1.1 GB".fn download_button_size(bytes: int) -> str {    if bytes < 1024 { return `${bytes} B` }    let kb = bytes / 1024    if kb < 1024 { return `${kb < 10 ? round(kb, 1) : floor(kb + 0.5)} KB` }    let mb = kb / 1024    if mb < 1024 { return `${mb < 10 ? round(mb, 1) : floor(mb + 0.5)} MB` }    `${round(mb / 1024, 1)} GB`}// The file's kind from its name's ending: "report.pdf" is "PDF"; "" for none.fn download_button_kind(name: str) -> str {    let tail = last(split(split(split(name, "?")[0], "#")[0], "/")) ?? ""    let ending = contains(tail, ".") ? last(split(tail, ".")) : ""    len(ending) > 0 && len(ending) <= 5 ? upper(ending) : ""}view DownloadButton(href: str, filename: str? = null, kind: str? = null, bytes: int? = null, label: str = "Download",                    variant: str = "outline", tone: str = "accent", size: str = "md", id: str? = null, class: str? = null) {    style global download_button_css    let what = kind ?? download_button_kind(filename ?? href)    let meta = [what != "" && what, bytes != null && download_button_size(bytes)] | filter((p) => p != false) | join(", ")    <a class={ui_cls(["ui-btn", `ui-btn-${variant}`, tone != "accent" && `ui-btn-${tone}`, size != "md" && `ui-btn-${size}`, "ui-download-button", class])}       id={id} href={href} download={filename ?? true}>        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"             stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>        <span>{label}</span>        {meta != "" && <span.ui-download-button-meta>{meta}</span>}    </a>}