4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1641,/** * Team — the people behind the product. * * a11y: portraits carry the person's name as `alt` only when there is no visible * name beside them, which there almost always is — so the default is `alt=""`. * Announcing "photo of Rosa Iqbal, Rosa Iqbal, Head of Design" is worse than * announcing the name once. * * Social links are per person and each gets an accessible name that includes * whose profile it is: four "Twitter" links in a row are indistinguishable when * read out of context, which is exactly how a screen-reader user meets them in * a links list. * * Dependencies: react, @/lib/types, @/lib/utils, * @/components/ui/container, @/components/ui/heading, @/components/ui/section, * @/components/ui/section-header. */ import type { ElementType } from "react" import type { HeadingLevel, IconComponent, ImageComponent, LinkComponent, ListSlotProps, SectionBaseProps, } from "@/lib/types" import { cn, slugId } from "@/lib/utils" import { Container } from "@/components/ui/container" import { Heading } from "@/components/ui/heading" import { Section } from "@/components/ui/section" import { SectionHeader } from "@/components/ui/section-header" export interface TeamSocial { /** Network name, e.g. "GitHub". Combined with the person's name for the label. */ label: string href: string icon: IconComponent } export interface TeamMember { name: string role: string bio?: string photoSrc?: string social?: TeamSocial[] } export interface TeamProps extends SectionBaseProps, ListSlotProps { items: TeamMember[] title?: string eyebrow?: string description?: string image?: ImageComponent link?: LinkComponent columns?: 2 | 3 | 4 /** `square` crops photos to a card. `circle` shows round avatars. */ shape?: "square" | "circle" itemHeadingLevel?: HeadingLevel align?: "start" | "center" } const columnClasses = { 2: "sm:grid-cols-2", 3: "sm:grid-cols-2 lg:grid-cols-3", 4: "grid-cols-2 lg:grid-cols-4", } as const export function Team({ items, title, eyebrow, description, image, link, columns = 3, shape = "square", itemHeadingLevel, align = "center", listAs, itemAs, headingLevel = 2, as, spacing = "md", className, id, }: TeamProps) { const List = (listAs ?? "ul") as ElementType const Item = (itemAs ?? "li") as ElementType const Image = (image ?? "img") as ElementType const Link = (link ?? "a") as ElementType const titleId = title ? (id ? `${id}-title` : slugId(title)) : undefined const itemLevel = itemHeadingLevel ?? (Math.min(headingLevel + 1, 6) as HeadingLevel) const circle = shape === "circle" return (

{title ? ( ) : null} {items.map((member) => ( {member.photoSrc ? (

) : null}

{member.name}

{member.role}

{member.bio ? (

{member.bio}

) : null} {member.social?.length ? (

{/* Whose profile, not just which network. */} {member.name} on {social.label} (opens in a new tab)

) : null} ))}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@facade","registryDependencies":["https://facadeui.dev/r/container.json","https://facadeui.dev/r/heading.json","https://facadeui.dev/r/section.json","https://facadeui.dev/r/section-header.json","https://facadeui.dev/r/types.json","https://facadeui.dev/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/sections/team.tsx","content":"$50","type":"registry:component","target":"components/sections/team.tsx"}],"className":"h-[70svh] min-h-80"}]]}]