// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Team 05 * @description Team list organized by departments with contact options. * Organized team display by departments. * * @slots team, team-container, team-header, team-heading, team-description, * team-departments, team-department, team-department-header, team-department-name, * team-member-grid, team-member-card, team-member-avatar, team-member-info, * team-member-name, team-member-role, team-member-social * @variant departments * * @registryDependencies avatar * @dependencies lucide-react */ import * as React from "react" import { Linkedin, Twitter, Mail } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar" // ============================================================================ // TYPES // ============================================================================ interface SocialLinkConfig { /** Unique identifier for list key */ id: string /** Platform type */ platform: "linkedin" | "twitter" /** Link destination */ href: string } interface TeamMemberConfig { /** Unique identifier for list key */ id: string /** Member name */ name: string /** Role/title */ role: string /** Avatar image URL */ image?: string /** Email address */ email?: string /** Social links */ social?: SocialLinkConfig[] } interface DepartmentConfig { /** Unique identifier for list key */ id: string /** Department name */ name: string /** Department members */ members: TeamMemberConfig[] } interface Team05Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of departments */ departments?: DepartmentConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_DEPARTMENTS: DepartmentConfig[] = [ { id: "dept-leadership", name: "Leadership", members: [ { id: "member-sarah", name: "Sarah Chen", role: "CEO", email: "sarah@example.com", social: [{ id: "social-li", platform: "linkedin", href: "#" }], }, { id: "member-michael", name: "Michael Park", role: "CTO", email: "michael@example.com", social: [ { id: "social-li", platform: "linkedin", href: "#" }, { id: "social-tw", platform: "twitter", href: "#" }, ], }, ], }, { id: "dept-engineering", name: "Engineering", members: [ { id: "member-emily", name: "Emily Rodriguez", role: "Lead Engineer", email: "emily@example.com", }, { id: "member-james", name: "James Wilson", role: "Senior Developer", email: "james@example.com", }, { id: "member-alice", name: "Alice Kim", role: "Backend Developer", email: "alice@example.com", }, { id: "member-david", name: "David Lee", role: "Frontend Developer", email: "david@example.com", }, ], }, { id: "dept-design", name: "Design", members: [ { id: "member-jessica", name: "Jessica Brown", role: "Design Lead", email: "jessica@example.com", }, { id: "member-ryan", name: "Ryan Taylor", role: "Product Designer", email: "ryan@example.com", }, ], }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const SOCIAL_ICONS = { linkedin: Linkedin, twitter: Twitter, } // ============================================================================ // COMPONENT // ============================================================================ function Team05({ heading = "Our Team", description = "Meet the talented people who make it all happen", departments = DEFAULT_DEPARTMENTS, className, idBase, }: Team05Props) { const headingId = `${idBase ?? "team-05"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Departments */}

{departments.map((department) => (

{/* Department Header */}

{department.name}

{/* Member Grid */}

{department.members.map((member) => (

{/* Avatar */} {member.name .split(" ") .map((n) => n[0]) .join("")} {/* Info */}

{member.name}

{member.role}

{/* Social */}

{member.email && ( )} {member.social?.map((link) => { const Icon = SOCIAL_ICONS[link.platform] return ( ) })}

))}

) } export default Team05 export { Team05, type Team05Props, type TeamMemberConfig, type DepartmentConfig, type SocialLinkConfig, }