{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "contact-people", "title": "Contact People", "description": "A grid of person cards with role, languages, an email to copy and an optional booking link, filtered by team.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "@manniche/chart-kit" ], "files": [ { "path": "registry/manniche/contact-people/contact-people.tsx", "content": "// Contact people: a grid of person cards (initials or image avatar, name, role, language chips, email with a copy\n// button, optional \"Book a call\"). A team filter appears as Pills when there is more than one team.\n// Signature: copying an email shows \"Copied\" in place, announced through a live region.\n// Screen readers: a section named by its h2, a list of people with an h3 each; the filter is a radio group and the\n// result count is announced. Reduced motion: the press feedback on the buttons is dropped; nothing else moves.\nimport { useEffect, useId, useRef, useState, type HTMLAttributes, type ReactNode } from 'react'\nimport { Check, Copy } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Pills } from '@/registry/manniche/chart-kit/chart-kit'\n\nexport type ContactPerson = {\n id: string\n name: string\n role: string\n /** Team name; used for the filter. */\n team?: string\n /** Language chips: \"English\", \"Deutsch\". */\n languages?: string[]\n email: string\n /** Optional booking link. */\n bookHref?: string\n /** Image slot; initials are shown when absent. */\n avatar?: ReactNode\n}\n\nexport type ContactPeopleProps = Omit, 'title'> & {\n /** The section heading (h2). */\n heading: ReactNode\n intro?: ReactNode\n people: ContactPerson[]\n labels?: { all?: string; filter?: string; copy?: string; copied?: string; failed?: string; book?: string; languages?: string; shown?: (n: number) => string }\n}\n\nconst initials = (name: string) => name.split(/\\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase()).join('')\n\nfunction CopyEmail({ email, L }: { email: string; L: { copy: string; copied: string; failed: string } }) {\n const [s, setS] = useState<'idle' | 'copied' | 'failed'>('idle')\n const timer = useRef>(undefined)\n useEffect(() => () => clearTimeout(timer.current), [])\n const run = async () => {\n try {\n await navigator.clipboard.writeText(email)\n setS('copied')\n } catch {\n setS('failed')\n }\n clearTimeout(timer.current)\n timer.current = setTimeout(() => setS('idle'), 1800)\n }\n return (\n <>\n \n {s === 'copied' ? L.copied : s === 'failed' ? L.failed : ''}\n \n )\n}\n\nexport function ContactPeople({ heading, intro, people, labels = {}, className, ...rest }: ContactPeopleProps) {\n const L = { all: 'Everyone', filter: 'Team', copy: 'Copy email', copied: 'Copied', failed: 'Not copied', book: 'Book a call', languages: 'Languages', shown: (n: number) => `${n} people shown`, ...labels }\n const uid = useId()\n const teams = Array.from(new Set(people.map((p) => p.team).filter((t): t is string => !!t)))\n const [team, setTeam] = useState('all')\n // A team that is no longer in `people` falls back to everyone, so the list never ends up empty with no way out.\n const active = team === 'all' || teams.includes(team) ? team : 'all'\n const list = active === 'all' ? people : people.filter((p) => p.team === active)\n return (\n
\n
\n
\n

{heading}

\n {intro &&

{intro}

}\n
\n {teams.length > 1 && (\n ({ id: t, label: t }))]} />\n )}\n
\n

{L.shown(list.length)}

\n
    \n {list.map((p) => (\n
  • \n
    \n
    \n \n {p.avatar ?? initials(p.name)}\n \n
    \n

    {p.name}

    \n

    {p.role}

    \n
    \n
    \n {p.languages && p.languages.length > 0 && (\n
      \n {p.languages.map((l) => (\n
    • {l}
      • \n ))}\n
    \n )}\n

    {p.email}

    \n
    \n \n {p.bookHref && (\n \n {L.book}: {p.name}\n \n )}\n
    \n
    \n
    • \n ))}\n
\n
\n )\n}\n", "type": "registry:component" } ], "categories": [ "templates" ], "type": "registry:block" }