{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["avatar","button","@efferd/full-width-divider","@efferd/github-icon","@efferd/linkedin-icon","@efferd/x-icon"],"name":"team-2","description":"Compact team list with avatars, names, roles, and social links in a bordered layout with a hiring call-to-action.","categories":["team"],"files":[{"path":"registry/blocks/team/2/team-section.tsx","type":"registry:component","content":"import { GithubIcon } from \"@/components/icons/github-icon\";\nimport { LinkedinIcon } from \"@/components/icons/linkedin-icon\";\nimport { XIcon } from \"@/components/icons/x-icon\";\nimport {\n\tAvatar,\n\tAvatarFallback,\n\tAvatarImage,\n} from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\n\ntype Social = {\n\tlabel: \"X\" | \"GitHub\" | \"LinkedIn\";\n\thref: string;\n};\n\ntype TeamMember = {\n\tname: string;\n\trole: string;\n\timage: string;\n\tsocials: Social[];\n};\n\nconst socialIcons = {\n\tX: XIcon,\n\tGitHub: GithubIcon,\n\tLinkedIn: LinkedinIcon,\n} as const;\n\nconst team: TeamMember[] = [\n\t{\n\t\tname: \"Shaban Haider\",\n\t\trole: \"Founder & CEO\",\n\t\timage: \"https://github.com/shabanhr.png\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"GitHub\", href: \"#\" },\n\t\t\t{ label: \"LinkedIn\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Jordan Blake\",\n\t\trole: \"Head of Product\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"GitHub\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Priya Nair\",\n\t\trole: \"Design Lead\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"LinkedIn\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Alex Rivera\",\n\t\trole: \"Engineering\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"GitHub\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Sam Okonkwo\",\n\t\trole: \"Growth\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"LinkedIn\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Leo Park\",\n\t\trole: \"Developer Experience\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"GitHub\", href: \"#\" },\n\t\t],\n\t},\n];\n\nexport function TeamSection() {\n\treturn (\n\t\t<section\n\t\t\taria-labelledby=\"team-heading\"\n\t\t\tclassName=\"mx-auto flex h-screen w-full max-w-5xl flex-col justify-center border-x\"\n\t\t>\n\t\t\t<div className=\"flex flex-col gap-2 px-4 py-8 md:px-6 md:py-12\">\n\t\t\t\t<h2\n\t\t\t\t\tclassName=\"text-balance font-medium text-3xl md:text-4xl\"\n\t\t\t\t\tid=\"team-heading\"\n\t\t\t\t>\n\t\t\t\t\tMeet the team\n\t\t\t\t</h2>\n\t\t\t\t<p className=\"max-w-lg text-pretty text-muted-foreground text-sm md:text-base\">\n\t\t\t\t\tThe people who design, ship, and obsess over every Efferd block.\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"relative\">\n\t\t\t\t<FullWidthDivider position=\"top\" />\n\t\t\t\t<ul className=\"grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-3\">\n\t\t\t\t\t{team.map((member) => (\n\t\t\t\t\t\t<TeamMemberCard key={member.name} member={member} />\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t\t<FullWidthDivider position=\"bottom\" />\n\t\t\t</div>\n\n\t\t\t<div className=\"relative flex flex-col items-start justify-between gap-4 px-4 py-8 md:flex-row md:items-center md:px-6\">\n\t\t\t\t<FullWidthDivider position=\"bottom\" />\n\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t<p className=\"font-medium text-foreground\">Want to join us?</p>\n\t\t\t\t\t<p className=\"text-pretty text-muted-foreground text-sm\">\n\t\t\t\t\t\tWe're always looking for people who care about craft.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<Button asChild variant=\"outline\">\n\t\t\t\t\t<a href=\"#careers\">View openings</a>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\nfunction TeamMemberCard({ member }: { member: TeamMember }) {\n\tconst { name, role, image, socials } = member;\n\n\treturn (\n\t\t<li className=\"flex items-center gap-3 bg-background p-4 md:p-6\">\n\t\t\t<Avatar className=\"size-12 rounded-sm shadow-sm *:rounded-sm after:rounded-sm\">\n\t\t\t\t<AvatarImage alt={`${name}'s portrait`} src={image} />\n\t\t\t\t<AvatarFallback>{getInitials(name)}</AvatarFallback>\n\t\t\t</Avatar>\n\t\t\t<div className=\"flex min-w-0 flex-col gap-0.5\">\n\t\t\t\t<h3 className=\"truncate font-medium text-foreground\">{name}</h3>\n\t\t\t\t<p className=\"text-muted-foreground text-sm\">{role}</p>\n\t\t\t</div>\n\t\t\t<div className=\"ms-auto flex h-full shrink-0 items-end gap-0.5\">\n\t\t\t\t{socials.map((social) => {\n\t\t\t\t\tconst Icon = socialIcons[social.label];\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\tclassName=\"text-muted-foreground\"\n\t\t\t\t\t\t\tkey={social.label}\n\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<a aria-label={`${name} on ${social.label}`} href={social.href}>\n\t\t\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</li>\n\t);\n}\n\nfunction getInitials(name: string) {\n\treturn name\n\t\t.split(\" \")\n\t\t.map((part) => part[0])\n\t\t.join(\"\")\n\t\t.slice(0, 2)\n\t\t.toUpperCase();\n}\n"}]}