// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Team 07 * @description Team members displayed with personal stats and achievements. * Great for showcasing expertise and experience. * * @slots team, team-container, team-header, team-heading, team-description, * team-grid, team-card, team-image, team-content, team-name, team-role, * team-stats, team-stat, team-stat-value, team-stat-label * @variant stats * * @registryDependencies * @dependencies */ import * as React from "react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface StatConfig { /** Unique identifier for list key */ id: string /** Stat value */ value: string /** Stat label */ label: string } interface TeamMemberConfig { /** Unique identifier for list key */ id: string /** Member name */ name: string /** Role/title */ role: string /** Avatar image URL */ image: string /** Member stats */ stats?: StatConfig[] } interface Team07Props { /** 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", stats: [ { id: "stat-exp", value: "15+", label: "Years Experience" }, { id: "stat-companies", value: "3", label: "Companies Founded" }, { id: "stat-raised", value: "$50M+", label: "Raised" }, ], }, { id: "member-marcus", name: "Marcus Johnson", role: "CTO", image: "/assets/placeholders/placeholder-1x1.svg", stats: [ { id: "stat-exp", value: "12+", label: "Years Engineering" }, { id: "stat-patents", value: "50+", label: "Patents" }, { id: "stat-users", value: "1M+", label: "Users Served" }, ], }, { id: "member-emily", name: "Emily Rodriguez", role: "Head of Design", image: "/assets/placeholders/placeholder-1x1.svg", stats: [ { id: "stat-exp", value: "10+", label: "Years Design" }, { id: "stat-awards", value: "25+", label: "Awards Won" }, { id: "stat-products", value: "100+", label: "Products Shipped" }, ], }, { id: "member-david", name: "David Kim", role: "Head of Engineering", image: "/assets/placeholders/placeholder-1x1.svg", stats: [ { id: "stat-exp", value: "8+", label: "Years Coding" }, { id: "stat-prs", value: "200+", label: "PRs Merged" }, { id: "stat-team", value: "15", label: "Team Size" }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function Team07({ heading = "Our Experts", description = "A team with proven track records and impressive achievements.", members = DEFAULT_MEMBERS, className, idBase, }: Team07Props) { const headingId = `${idBase ?? "team-07"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Team Grid */}

{members.map((member) => (

{/* Image */}

{/* Content */}

{member.name}

{member.role}

{/* Stats */} {member.stats && member.stats.length > 0 && (

{member.stats.map((stat) => (

{stat.value}

{stat.label}

))}

)}

))}

) } export default Team07 export { Team07, type Team07Props, type TeamMemberConfig, type StatConfig }