/* eslint-disable @next/next/no-img-element -- portable registry component; bring your own image pipeline */ import type { HTMLAttributes, ReactNode } from "react"; export type TeamMemberLink = { label: string; href: string }; export type TeamMemberCardProps = HTMLAttributes & { name?: string; role?: string; location?: string; /** Short timezone note, for example "UTC+1". */ timezone?: string; bio?: ReactNode; avatarSrc?: string; links?: TeamMemberLink[]; headingLevel?: "h2" | "h3" | "h4"; }; function initials(name: string) { return name .split(" ") .filter(Boolean) .slice(0, 2) .map((part) => part[0]?.toUpperCase() ?? "") .join(""); } export function TeamMemberCard({ name = "Inês Carvalho", role = "Head of database reliability", location = "Lisbon, Portugal", timezone = "UTC+1", bio = "Ran Postgres for a 40 TB payments ledger before joining Halyard. Owns the planner and the on-call rotation that tests it.", avatarSrc, links = [ { label: "GitHub", href: "#" }, { label: "Writing", href: "#" }, ], headingLevel = "h3", className = "", ...props }: TeamMemberCardProps) { const Heading = headingLevel; return (

{avatarSrc ? ( {"Portrait

) : ( )}

{name}

{role}

{location ? (

{location} {timezone ? {", " + timezone} : null}

) : null}

{bio ?

{bio}

: null} {links.length > 0 ? (

{link.label}

) : null}

); }

Inês Carvalho

Kwame Asante

Inês Carvalho

Kwame Asante