TeamCard

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

view TeamCardDemo() =    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px">        <TeamCard id="team-card-demo-ada" name="Ada Lovelace" role="Founder" href="#team_card" bio="Programs before computers."                  links={[{ kind: "email", href: "mailto:ada@example.com" }, { kind: "github", href: "https://github.com/ada" },                          { kind: "linkedin", href: "https://linkedin.com/in/ada" }, { kind: "x", href: "https://x.com/ada" }]}/>        <TeamCard name="Grace Hopper" role="Compilers" src="https://i.pravatar.cc/224?img=47"                  links={[{ kind: "web", href: "https://example.com", label: "Grace's site" }, { kind: "email", href: "mailto:grace@example.com" }]}/>        <TeamCard name="Alan Turing" role="Research" bio="Machines, and whether they think."                  links={[{ kind: "phone", href: "tel:+441234567" }]}/>        <TeamCard name="Hedy Lamarr" role="Radio" size="sm"/>    </div>

// TeamCard: one person of a team, for a grid of them: their photo, name, role, a// line about them, and links to where they are (email, LinkedIn, GitHub, X, a site).////   <TeamCard name="Ada Lovelace" role="Founder" src="/img/ada.jpg" bio="Programs before computers."//             links={[{ kind: "email", href: "mailto:ada@example.com" }, { kind: "github", href: "https://github.com/ada" }]}/>//// name, role, bio: who they are. src: the photo, square, on top; initials on a// colour without one. links: a list of { kind, href, label? }: kind is "email",// "phone", "web", "linkedin", "github" or "x", an icon each, named for screen// readers by label, else by the kind and the name ("Ada Lovelace on GitHub"). Links// to other sites open in a new tab. href: makes the name a link (their page).// size: "md" (default) or "sm" (a smaller photo, for many). id: the card's id.// Needs avatar.qwe (Avatar draws the initials).import ui/avatar.qwe use Avatarimport ui/theme.qwe use ui_clslet team_card_css = css`.ui-team-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 20px 16px; border: 1px solid var(--ui-border);  border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.5 var(--ui-font); text-align: center; }.ui-team-card-photo { width: 112px; height: 112px; margin-bottom: 10px; border-radius: var(--ui-radius); overflow: hidden; }.ui-team-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }.ui-team-card-photo > .ui-team-card-initials { --s: 112px; }.ui-team-card-sm .ui-team-card-photo { width: 72px; height: 72px; }.ui-team-card-sm .ui-team-card-photo > .ui-team-card-initials { --s: 72px; }.ui-team-card-name { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }.ui-team-card-name a { color: inherit; text-decoration: none; }.ui-team-card-name a:hover { color: var(--ui-accent); text-decoration: underline; }.ui-team-card-name a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ui-focus); }.ui-team-card-role { color: var(--ui-accent); font-size: 13px; font-weight: 500; }.ui-team-card-bio { margin: 6px 0 0; color: var(--ui-muted); font-size: 13px; }.ui-team-card-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }.ui-team-card-link { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-radius-sm); color: var(--ui-muted); }.ui-team-card-link:hover { background: var(--ui-subtle); color: var(--ui-fg); }.ui-team-card-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-team-card-link svg { width: 18px; height: 18px; }`// The names of the places: for the links' labels.fn team_card_place(kind: str) -> str =    match kind { "email" => "Email", "phone" => "Phone", "web" => "Website", "linkedin" => "LinkedIn", "github" => "GitHub", "x" => "X", _ => kind }fn team_card_icon(kind: str) =    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">        {match kind {            "email" => [<rect x="3" y="5" width="18" height="14" rx="2"/>, <path d="m3 8 9 6 9-6"/>]            "phone" => <path d="M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 5a2 2 0 0 1 2-2Z"/>            "linkedin" => [<rect x="3" y="3" width="18" height="18" rx="3"/>, <path d="M8 11v6M8 7.5v.5M12 17v-6M12 13.5a2.5 2.5 0 0 1 5 0V17"/>]            "github" => <path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/>            "x" => <path d="M4 4l16 16M20 4 4 20"/>            _ => [<circle cx="12" cy="12" r="9"/>, <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>]        }}    </svg>view TeamCard(name: str, role: str? = null, bio: str? = null, src: str? = null, links: list = [], href: str? = null,              size: str = "md", id: str? = null, class: str? = null) {    style global team_card_css    <article class={ui_cls(["ui-team-card", size == "sm" && "ui-team-card-sm", class])} id={id}>        <div.ui-team-card-photo>            {src != null ? <img src={src} alt="" loading="lazy"/> : <Avatar name={name} shape="square" class="ui-team-card-initials"/>}        </div>        <h3.ui-team-card-name>{href != null ? <a href={href}>{name}</a> : name}</h3>        {role != null && <span.ui-team-card-role>{role}</span>}        {bio != null && <p.ui-team-card-bio>{bio}</p>}        {len(links) > 0 && <ul.ui-team-card-links>            {for l in links => {                let kind = l.kind ?? "web"                let away = starts_with(l.href, "http")                <li key={l.href}>                    <a.ui-team-card-link href={l.href} aria-label={l.label ?? `${name} on ${team_card_place(kind)}`}                       title={l.label ?? team_card_place(kind)} target={away ? "_blank" : null} rel={away ? "noopener" : null}>                        {team_card_icon(kind)}                    </a>                </li>            }}        </ul>}    </article>}