TestimonialCard

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

view TestimonialCardDemo() =    <div.demo-stack>        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px">            <TestimonialCard id="testimonial-card-demo-ada" quote="Quillo cut our build time in half, and the components came with their keyboard and screen reader work done."                             name="Ada Lovelace" title="CTO" company="Analytical Engines" rating={5}/>            <TestimonialCard quote="We shipped the whole admin in a week. Forms that post without JavaScript are a relief."                             name="Grace Hopper" title="Head of engineering" company="Navy Labs" src="https://i.pravatar.cc/80?img=47"                             logo="https://dummyimage.com/220x56/5b4bdb/ffffff.png&text=NAVY+LABS"/>        </div>        <TestimonialCard variant="large" quote="The first framework where the server-rendered page and the live one are the same page."                         name="Alan Turing" title="Researcher" company="Bletchley" rating={4}/>        <TestimonialCard variant="plain" quote="Short, and to the point." name="Plato"/>    </div>

// TestimonialCard: what a customer said, and who they are: their words as a quote,// their picture, name, title and company (or its logo), and stars if they gave some.////   <TestimonialCard quote="Quillo cut our build time in half." name="Ada Lovelace"//                    title="CTO" company="Analytical Engines" src="/img/ada.jpg" rating={5}/>//// quote: their words. name, title, company: who said it; src: their picture// (initials without one); logo: the company's logo image, shown instead of its name// written out (its alt is the company). rating: stars, 1 to 5, said to screen// readers. variant: "card" (default, bordered), "plain" (no border) or "large" (a// bigger quote, for one on its own). It is a <figure>: the quote in a <blockquote>,// the person in its <figcaption>. id: its id. Needs avatar.qwe.import ui/avatar.qwe use Avatarimport ui/theme.qwe use ui_clslet testimonial_card_css = css`.ui-testimonial-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 22px 24px; border: 1px solid var(--ui-border);  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 15px/1.6 var(--ui-font); }.ui-testimonial-card-plain { padding: 0; border: 0; background: none; }.ui-testimonial-card-mark { width: 28px; height: 28px; color: var(--ui-accent); opacity: .5; }.ui-testimonial-card-stars { display: inline-flex; gap: 2px; color: var(--ui-warning); }.ui-testimonial-card-stars svg { width: 16px; height: 16px; }.ui-testimonial-card-stars .ui-testimonial-card-off { color: var(--ui-border); }.ui-testimonial-card-quote { flex: 1; margin: 0; }.ui-testimonial-card-quote p { margin: 0; }.ui-testimonial-card-large .ui-testimonial-card-quote { font-size: 20px; line-height: 1.5; font-weight: 450; letter-spacing: -.005em; }.ui-testimonial-card-who { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; }.ui-testimonial-card-name { font-weight: 600; }.ui-testimonial-card-role { color: var(--ui-muted); font-size: 13px; }.ui-testimonial-card-logo { max-width: 110px; max-height: 28px; margin-left: auto; object-fit: contain; }`fn testimonial_card_star(on: bool) =    <svg viewBox="0 0 24 24" class={on ? null : "ui-testimonial-card-off"} fill="currentColor" aria-hidden="true">        <path d="M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8Z"/>    </svg>view TestimonialCard(quote: str, name: str, title: str? = null, company: str? = null, src: str? = null, logo: str? = null,                     rating: int? = null, variant: str = "card", id: str? = null, class: str? = null) {    style global testimonial_card_css    let role = join([title, logo == null && company] | filter((x) => x != null && x != false), ", ")    <figure class={ui_cls(["ui-testimonial-card", variant != "card" && `ui-testimonial-card-${variant}`, class])} id={id}>        {rating != null            ? <span.ui-testimonial-card-stars role="img" aria-label={`${rating} out of 5 stars`}>                  {for i in range(0, 5) => testimonial_card_star(i < rating)}              </span>            : <svg.ui-testimonial-card-mark viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">                  <path d="M6.5 5C4 5 2 7.2 2 10.2c0 2.6 1.6 4.6 4 4.6.4 0 .7 0 1-.2-.3 2-1.6 3.4-3.5 4.1l.6 1.3C8 19 10 16.2 10 12.3 10 8 8.7 5 6.5 5Zm11 0C15 5 13 7.2 13 10.2c0 2.6 1.6 4.6 4 4.6.4 0 .7 0 1-.2-.3 2-1.6 3.4-3.5 4.1l.6 1.3C19 19 21 16.2 21 12.3 21 8 19.7 5 17.5 5Z"/>              </svg>}        <blockquote.ui-testimonial-card-quote><p>{quote}</p></blockquote>        <figcaption.ui-testimonial-card-who>            <Avatar name={name} src={src}/>            <div>                <div.ui-testimonial-card-name>{name}</div>                {role != "" && <div.ui-testimonial-card-role>{role}</div>}            </div>            {logo != null && <img.ui-testimonial-card-logo src={logo} alt={company ?? ""}/>}        </figcaption>    </figure>}