// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Team 03 * @description An alternating layout team section with large images * and extended bios. Magazine-style presentation. * * @slots team, team-container, team-header, team-heading, team-description, * team-list, team-member, team-image, team-content, team-name, * team-role, team-bio, team-social * @variant alternating * * @registryDependencies icon-button button * @dependencies lucide-react */ import * as React from "react" import { Linkedin, Mail } from "lucide-react" import { FaXTwitter } from "react-icons/fa6" import { cn } from "@/registry/lib/utils" import { IconButtonLink } from "@/registry/ui/icon-button" // ============================================================================ // TYPES // ============================================================================ interface SocialLink { /** Platform type */ platform: "linkedin" | "twitter" | "email" /** Link destination */ href: string } interface TeamMember { /** Member name */ name: string /** Member role/title */ role: string /** Extended bio */ bio: string /** Photo URL */ image: string /** Social links */ social?: SocialLink[] } interface Team03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of team members */ members?: TeamMember[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMembers: TeamMember[] = [ { name: "Alex Chen", role: "CEO & Co-founder", bio: "Alex brings over 15 years of experience in technology leadership. Before founding the company, Alex led product teams at several Fortune 500 companies and has a passion for building products that make a real difference in people's lives.", image: "/assets/placeholders/placeholder-3x4.svg", social: [ { platform: "linkedin", href: "#" }, { platform: "twitter", href: "#" }, ], }, { name: "Sarah Miller", role: "CTO & Co-founder", bio: "Sarah is a technologist at heart with deep expertise in distributed systems and machine learning. She previously worked as a principal engineer at a leading cloud provider and holds multiple patents in her field.", image: "/assets/placeholders/placeholder-3x4.svg", social: [ { platform: "linkedin", href: "#" }, { platform: "twitter", href: "#" }, ], }, { name: "Michael Park", role: "Head of Design", bio: "Michael leads our design team with a focus on creating intuitive, beautiful experiences. With a background in both product design and fine arts, he brings a unique perspective to every project and has won numerous industry awards.", image: "/assets/placeholders/placeholder-3x4.svg", social: [ { platform: "linkedin", href: "#" }, { platform: "email", href: "#mailto:michael@example.com" }, ], }, ] // ============================================================================ // HELPER // ============================================================================ const socialIcons = { linkedin: Linkedin, twitter: FaXTwitter, email: Mail, } // ============================================================================ // COMPONENT // ============================================================================ function Team03({ heading = "Meet our leadership", description = "We're a diverse team of passionate individuals dedicated to building the best product for our customers.", members = defaultMembers, className, }: Team03Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Team Members */}

{members.map((member, index) => (

*:first-child]:order-2" )} > {/* Image */}

{/* Content */}

{member.name}

{member.role}

{member.bio}

{/* Social Links */} {member.social && member.social.length > 0 && (

{member.social.map((social, socialIndex) => { const Icon = socialIcons[social.platform] return ( ) })}

)}

))}

) } export default Team03 export { Team03, type Team03Props, type TeamMember, type SocialLink }