"use client" /** * @name Team 04 * @description Team cards with hover effects revealing details and social links. * Interactive team member grid with expanded details on hover. * * @slots team, team-container, team-header, team-heading, team-description, * team-grid, team-card, team-image, team-overlay, team-content, * team-name, team-role, team-social * @variant hover * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Linkedin, Twitter, Mail, Github } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface SocialLinkConfig { /** Unique identifier for list key */ id: string /** Platform type */ platform: "linkedin" | "twitter" | "github" | "email" /** Link destination */ href: string } interface TeamMemberConfig { /** Unique identifier for list key */ id: string /** Member name */ name: string /** Role/title */ role: string /** Photo URL */ image: string /** Optional short bio */ bio?: string /** Social links */ social?: SocialLinkConfig[] } interface Team04Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Team members */ members?: TeamMemberConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_MEMBERS: TeamMemberConfig[] = [ { id: "member-sarah", name: "Sarah Chen", role: "CEO & Founder", image: "/assets/placeholders/placeholder-1x1.svg", bio: "Serial entrepreneur with 15+ years experience", social: [ { id: "social-li", platform: "linkedin", href: "#" }, { id: "social-tw", platform: "twitter", href: "#" }, ], }, { id: "member-michael", name: "Michael Park", role: "CTO", image: "/assets/placeholders/placeholder-1x1.svg", bio: "Former Google engineer, AI specialist", social: [ { id: "social-li", platform: "linkedin", href: "#" }, { id: "social-gh", platform: "github", href: "#" }, ], }, { id: "member-emily", name: "Emily Rodriguez", role: "Head of Design", image: "/assets/placeholders/placeholder-1x1.svg", bio: "Award-winning product designer", social: [ { id: "social-tw", platform: "twitter", href: "#" }, { id: "social-em", platform: "email", href: "#mailto:emily@example.com" }, ], }, { id: "member-james", name: "James Wilson", role: "Head of Engineering", image: "/assets/placeholders/placeholder-1x1.svg", bio: "Full-stack developer, open source contributor", social: [ { id: "social-gh", platform: "github", href: "#" }, { id: "social-li", platform: "linkedin", href: "#" }, ], }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const SOCIAL_ICONS = { linkedin: Linkedin, twitter: Twitter, github: Github, email: Mail, } // ============================================================================ // COMPONENT // ============================================================================ function Team04({ heading = "Meet Our Team", description = "The talented people behind our success", members = DEFAULT_MEMBERS, className, idBase, }: Team04Props) { const headingId = `${idBase ?? "team-04"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Team Grid */}

{members.map((member) => (

{/* Image */}

{/* Hover Overlay */}

{/* Hover Content */}

{member.name}

{member.role}

{member.bio && (

{member.bio}

)} {member.social && member.social.length > 0 && (

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

)}

{/* Static content when not hovering */}

{member.name}

{member.role}

))}

) } export default Team04 export { Team04, type Team04Props, type TeamMemberConfig, type SocialLinkConfig }