// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Team 06 * @description A bento-style grid with mixed card sizes featuring the founder * prominently and other team members in smaller cards. * * @slots team, team-container, team-header, team-heading, team-description, * team-grid, team-featured, team-featured-image, team-featured-content, * team-featured-name, team-featured-role, team-featured-bio, * team-card, team-image, team-name, team-role * @variant bento * * @registryDependencies * @dependencies */ import * as React from "react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TeamMemberConfig { /** Unique identifier for list key */ id: string /** Member name */ name: string /** Role/title */ role: string /** Avatar image URL */ image: string /** Bio (for featured member) */ bio?: string /** Is this the featured member */ featured?: boolean } interface Team06Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Team members (first featured member will be displayed large) */ 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-4x3.svg", bio: "Sarah founded the company with a vision to transform how teams collaborate. With over 15 years of experience in technology leadership, she brings unparalleled expertise in building products that millions of people love.", featured: true, }, { id: "member-marcus", name: "Marcus Johnson", role: "CTO", image: "/assets/placeholders/placeholder-1x1.svg", }, { id: "member-emily", name: "Emily Rodriguez", role: "Head of Design", image: "/assets/placeholders/placeholder-1x1.svg", }, { id: "member-david", name: "David Kim", role: "Head of Engineering", image: "/assets/placeholders/placeholder-1x1.svg", }, { id: "member-lisa", name: "Lisa Wang", role: "Head of Product", image: "/assets/placeholders/placeholder-1x1.svg", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Team06({ heading = "Leadership", description = "Meet the team building the future of work.", members = DEFAULT_MEMBERS, className, idBase, }: Team06Props) { const headingId = `${idBase ?? "team-06"}-heading` const featuredMember = members.find((m) => m.featured) || members[0] const otherMembers = members.filter((m) => m !== featuredMember) return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Bento Grid */}

{/* Featured Member - Large Card */}

{featuredMember.name}

{featuredMember.role}

{featuredMember.bio && (

{featuredMember.bio}

)}

{/* Other Members - Small Cards */} {otherMembers.slice(0, 4).map((member) => (

{member.name}

{member.role}

))}

) } export default Team06 export { Team06, type Team06Props, type TeamMemberConfig }