TeamGrid

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

let team_grid_demo_people = [    { name: "Ada Lovelace", role: "Founder", bio: "Wrote the first program, and the first notes on what programs could be.",      links: [{ label: "X", href: "#team_grid" }, { label: "Site", href: "#team_grid" }] },    { name: "Grace Hopper", role: "Compilers", bio: "Made code read like English, and found the first bug.",      links: [{ label: "GitHub", href: "#team_grid" }] },    { name: "Margaret Hamilton", role: "Flight software", bio: "Software that landed on the Moon and did not crash on the way." },    { name: "Linus Benedict", role: "Kernels" },]view TeamGridDemo() =    <div.demo-stack>        <TeamGrid id="team-grid-demo" title="The team" text="Four people, one file." people={team_grid_demo_people}/>        <TeamGrid columns={3} variant="cards" size="lg" people={take(team_grid_demo_people, 3)}/>    </div>

// TeamGrid: the people behind something, as a grid of cards: picture, name, role,// a line about them and links. It draws each person with Avatar, so the page needs// ui/avatar.qwe too.////   <TeamGrid title="The team" people={[//       { name: "Ada Lovelace", role: "Founder", src: "/img/ada.jpg", bio: "Wrote the first program.",//         links: [{ label: "X", href: "https://x.com/ada" }, { label: "Site", href: "https://ada.example" }] },//       { name: "Grace Hopper", role: "Compilers" },//   ]}/>//// people: a list of { name, role?, src?, bio?, links? }; links is a list of// { label, href }. title and text: a heading and a line above the grid.// columns: a fixed number (three or more become two under 900px, one under 560px);// without it, as many as fit at min pixels wide (200). variant: "plain" (default)// or "cards", each person in a bordered box. size: the picture, "lg" or "xl"// (default), as Avatar sizes. It is a <ul>, one <li> a person.import ui/avatar.qwe use Avatarimport ui/theme.qwe use ui_clslet team_grid_css = css`.ui-team { display: grid; gap: 28px; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }.ui-team-head { display: grid; gap: 8px; max-width: 640px; margin: 0 auto 4px; text-align: center; }.ui-team-title { margin: 0; font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }.ui-team-text { margin: 0; color: var(--ui-muted); font-size: 17px; }.ui-team-grid { display: grid; gap: 28px 20px; margin: 0; padding: 0; list-style: none;  grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-team-min, 200px), 100%), 1fr)); }.ui-team-cols .ui-team-grid { grid-template-columns: repeat(var(--ui-team-cols), minmax(0, 1fr)); }.ui-team-person { display: grid; gap: 4px; justify-items: center; min-width: 0; text-align: center; }.ui-team-cards .ui-team-person { padding: 24px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }.ui-team-person > .ui-avatar { margin-bottom: 8px; }.ui-team-name { margin: 0; font-size: 16px; font-weight: 600; }.ui-team-role { margin: 0; color: var(--ui-accent); font-size: 13px; font-weight: 500; }.ui-team-bio { margin: 6px 0 0; color: var(--ui-muted); font-size: 14px; }.ui-team-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 8px 0 0; padding: 0; list-style: none; }.ui-team-links a { color: var(--ui-muted); font-size: 13px; font-weight: 500; text-decoration: none; border-radius: 3px; }.ui-team-links a:hover { color: var(--ui-accent); text-decoration: underline; }.ui-team-links a:focus-visible { outline: none; box-shadow: var(--ui-focus); }@media (max-width: 899px) { .ui-team-many .ui-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (max-width: 559px) { .ui-team-cols .ui-team-grid { grid-template-columns: minmax(0, 1fr); } }`view TeamGrid(people: list, title: str? = null, text: str? = null, columns: int? = null, min: int = 200,              variant: str = "plain", size: str = "xl", id: str? = null, class: str? = null) {    style global team_grid_css    <section id={id} class={ui_cls(["ui-team", columns != null && "ui-team-cols", columns != null && columns > 2 && "ui-team-many",                                    variant == "cards" && "ui-team-cards", class])}             style={columns != null ? `--ui-team-cols: ${columns}` : `--ui-team-min: ${min}px`}>        {(title != null || text != null) && <div.ui-team-head>            {title != null && <h2.ui-team-title>{title}</h2>}            {text != null && <p.ui-team-text>{text}</p>}        </div>}        <ul.ui-team-grid>            {for p in people => <li.ui-team-person>                <Avatar name={p.name ?? ""} src={p.src} size={size}/>                <h3.ui-team-name>{p.name}</h3>                {p.role != null && <p.ui-team-role>{p.role}</p>}                {p.bio != null && <p.ui-team-bio>{p.bio}</p>}                {p.links != null && len(p.links) > 0 && <ul.ui-team-links aria-label={`${p.name}'s links`}>                    {for l in p.links => <li><a href={l.href}>{l.label}</a></li>}                </ul>}            </li>}        </ul>    </section>}