TrustBadges

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

view TrustBadgesDemo() =    <div.demo-stack>        <TrustBadges/>        <TrustBadges layout="grid" bordered={true} items={[            "shipping",            { icon: "support", title: "Here to help", text: "Chat with us, 9 to 6" },            { icon: "🌱", title: "Plants a tree", text: "With every order" },            "warranty",        ]}/>        <TrustBadges layout="list" size="sm" items={["privacy", "eco"]}/>    </div>

// TrustBadges: the reassurances under a Buy button or in a footer: secure payment,// free returns, a guarantee, each an icon with a line or two, in a row.////   <TrustBadges items={["secure", "returns", "guarantee"]}/>//   <TrustBadges layout="grid" items={[//       { icon: "shipping", title: "Free shipping", text: "On orders over $50" },//       { icon: "support", title: "Here to help", text: "Chat with us, 9 to 6" }]}/>//// items: names of the built-in ones, or maps of { icon, title, text? }. The// built-in names and their words: "secure" (Secure payment), "returns" (Free// returns), "guarantee" (Money-back guarantee), "shipping" (Free shipping),// "support" (24/7 support), "privacy" (Your data stays yours), "eco"// (Sustainably made), "warranty" (2-year warranty). An icon is one of those// names (drawn in SVG), or any text or emoji.// layout: "row" (default; wraps), "grid" (tiles) or "list" (one under another).// size: "sm" or "md" (default). bordered: a box around each (false).import ui/theme.qwe use ui_clslet trust_badges_css = css`.ui-trust { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 0; padding: 0; list-style: none; font: 13px/1.4 var(--ui-font); color: var(--ui-fg); }.ui-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }.ui-trust-list { flex-direction: column; gap: 12px; }.ui-trust-item { display: flex; align-items: center; gap: 10px; min-width: 0; }.ui-trust-grid .ui-trust-item { flex-direction: column; text-align: center; gap: 8px; padding: 14px 10px; }.ui-trust-bordered .ui-trust-item { padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }.ui-trust-icon { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 18px; }.ui-trust-icon svg { width: 20px; height: 20px; }.ui-trust-text { display: grid; gap: 1px; min-width: 0; }.ui-trust-title { font-weight: 600; }.ui-trust-note { color: var(--ui-muted); }.ui-trust-sm { gap: 12px 20px; font-size: 12px; }.ui-trust-sm .ui-trust-icon { width: 28px; height: 28px; font-size: 15px; }.ui-trust-sm .ui-trust-icon svg { width: 16px; height: 16px; }`// The built-in badges: their words, and the SVG path of their icon (24x24, stroked).let trust_badges_known = {    secure: { title: "Secure payment", text: "Encrypted checkout", d: "M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3zm-3 9l2 2 4-4" },    returns: { title: "Free returns", text: "Within 30 days", d: "M9 14l-4-4 4-4M5 10h10a4 4 0 0 1 0 8H9" },    guarantee: { title: "Money-back guarantee", text: "No questions asked", d: "M12 2l2.4 2.1 3.2-.3.8 3.1 2.8 1.6-1.3 2.9 1.3 2.9-2.8 1.6-.8 3.1-3.2-.3L12 22l-2.4-2.1-3.2.3-.8-3.1-2.8-1.6 1.3-2.9-1.3-2.9 2.8-1.6.8-3.1 3.2.3L12 2zm-3 10l2 2 4-4" },    shipping: { title: "Free shipping", text: "On every order", d: "M3 7h11v9H3zM14 10h4l3 3v3h-7zM6 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm12 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" },    support: { title: "24/7 support", text: "Real people, any time", d: "M5 13a7 7 0 0 1 14 0M4 13h3v5H4zm13 0h3v5h-3zM12 21h3a2 2 0 0 0 2-2v-1" },    privacy: { title: "Your data stays yours", text: "Never sold", d: "M6 11V8a6 6 0 0 1 12 0v3M5 11h14v10H5zM12 15v3" },    eco: { title: "Sustainably made", text: "Recycled materials", d: "M20 4c-8 0-14 4-14 12 0 1 0 2 .5 3C9 14 12 11 17 9c-4 3-7 6-9 11 7 1 12-4 12-16z" },    warranty: { title: "2-year warranty", text: "Repair or replace", d: "M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3zM12 8v4l2.5 1.5" },}view TrustBadges(items: list = ["secure", "returns", "guarantee"], layout: str = "row", size: str = "md",                 bordered: bool = false, label: str = "Why shop with us", class: str? = null) {    style global trust_badges_css    <ul class={ui_cls(["ui-trust", layout != "row" && `ui-trust-${layout}`, size == "sm" && "ui-trust-sm", bordered && "ui-trust-bordered", class])}        aria-label={label}>        {for it in items => {            let known = get(trust_badges_known, type_of(it) == "str" ? it : (get(it, "icon") ?? ""))            let title = type_of(it) == "str" ? (known.title ?? it) : it.title            let text = type_of(it) == "str" ? known.text : get(it, "text")            let icon = type_of(it) == "str" ? it : get(it, "icon")            <li.ui-trust-item key={title}>                <span.ui-trust-icon aria-hidden="true">                    {known != null                        ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={known.d}/></svg>                        : icon}                </span>                <span.ui-trust-text>                    <span.ui-trust-title>{title}</span>                    {text != null && <span.ui-trust-note>{text}</span>}                </span>            </li>        }}    </ul>}