PriceTag

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

view PriceTagDemo() =    <div.demo-stack>        <div.demo-row style="gap: 36px; align-items: flex-start">            <PriceTag amount={12} period="month" note="billed yearly"/>            <PriceTag amount={89} old={120} currency="EUR" locale="de-DE" period="night" prefix="From"/>            <PriceTag amount="Free" note="no card needed"/>        </div>        <div.demo-row style="gap: 36px; align-items: flex-start">            <PriceTag amount={4.99} period="seat" size="sm"/>            <PriceTag amount={240} period="year" size="lg" align="center" note="save 20%"/>            <PriceTag amount={1999} currency="GBP" locale="en-GB" size="xl"/>        </div>    </div>

// PriceTag: a bold price with its period ("/month") and a note under it, for a// plan, a room, a seat. Amounts are written as Price writes them (a number for// the currency and locale, text as it is); this file needs price.qwe.////   <PriceTag amount={12} period="month" note="billed yearly"/>//   <PriceTag amount={89} old={120} currency="EUR" locale="de-DE" period="night" prefix="From"/>//   <PriceTag amount="Free" note="no card needed" size="lg"/>//// amount: the price, a number or text. old: the price before, struck through.// period: what the price is per ("month", "year", "night", "seat"; shown as// "/month" and read as "per month"). prefix: a word before it ("From"). note: a// quieter line under it. currency ("USD"), locale as for Price; cents: false// (default) writes a whole amount without ".00" ("$12"). size: "sm", "md"// (default), "lg" or "xl". align: "start" (default) or "center".import ui/price.qwe use price_textimport ui/theme.qwe use ui_clslet price_tag_css = css`.ui-price-tag { display: inline-grid; gap: 2px; justify-items: start; font: 14px/1.3 var(--ui-font); color: var(--ui-fg); }.ui-price-tag-center { justify-items: center; text-align: center; }.ui-price-tag-prefix { font-size: 13px; color: var(--ui-muted); }.ui-price-tag-line { display: inline-flex; align-items: baseline; gap: 6px; }.ui-price-tag-amount { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }.ui-price-tag-old { font-size: 16px; color: var(--ui-muted); text-decoration: line-through; }.ui-price-tag-period { font-size: 14px; color: var(--ui-muted); }.ui-price-tag-note { font-size: 13px; color: var(--ui-muted); }.ui-price-tag-sm .ui-price-tag-amount { font-size: 22px; }.ui-price-tag-sm .ui-price-tag-old { font-size: 13px; }.ui-price-tag-sm .ui-price-tag-period, .ui-price-tag-sm .ui-price-tag-note { font-size: 12px; }.ui-price-tag-lg .ui-price-tag-amount { font-size: 42px; }.ui-price-tag-xl .ui-price-tag-amount { font-size: 56px; }.ui-price-tag-xl .ui-price-tag-period { font-size: 16px; }`view PriceTag(amount, old = null, period: str? = null, prefix: str? = null, note: str? = null,              currency: str = "USD", locale: str? = null, cents: bool = false, size: str = "md", align: str = "start",              class: str? = null) {    style global price_tag_css    let now_text = price_text(amount, currency, locale, cents)    let old_text = old != null ? price_text(old, currency, locale, cents) : null    let spoken = ui_cls([prefix, now_text, period != null && `per ${period}`, old_text != null && `, was ${old_text}`])    <div class={ui_cls(["ui-price-tag", size != "md" && `ui-price-tag-${size}`, align == "center" && "ui-price-tag-center", class])}>        {prefix != null && <span.ui-price-tag-prefix aria-hidden="true">{prefix}</span>}        <span.ui-price-tag-line aria-label={spoken}>            <span.ui-price-tag-amount aria-hidden="true">{now_text}</span>            {old_text != null && <s.ui-price-tag-old aria-hidden="true">{old_text}</s>}            {period != null && <span.ui-price-tag-period aria-hidden="true">/{period}</span>}        </span>        {note != null && <span.ui-price-tag-note>{note}</span>}    </div>}