// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Team 01 * @description A simple team grid with member cards showing photo, name, role, * and social links. Clean layout for showcasing team members. * * @slots team, team-container, team-header, team-heading, team-description, * team-grid, team-member, team-avatar, team-name, team-role, * team-bio, team-social * @variant grid * * @registryDependencies icon-button button * @dependencies lucide-react */ import * as React from "react" import { Linkedin } from "lucide-react" import { FaXTwitter } from "react-icons/fa6" import { cn } from "@/registry/lib/utils" import { IconButtonLink } from "@/registry/ui/icon-button" // ============================================================================ // TYPES // ============================================================================ interface SocialLinks { /** Twitter profile URL */ twitter?: string /** LinkedIn profile URL */ linkedin?: string } interface TeamMember { /** Unique identifier */ id: string /** Member name */ name: string /** Role/title */ role: string /** Avatar image URL */ image: string /** Optional bio */ bio?: string /** Social links */ social?: SocialLinks } interface Team01Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Team members */ members?: TeamMember[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMembers: TeamMember[] = [ { id: "member-1", name: "Sarah Chen", role: "CEO & Founder", image: "/assets/placeholders/avatar-placeholder.svg", bio: "Former VP at TechCorp. 15+ years in product leadership.", social: { twitter: "#", linkedin: "#", }, }, { id: "member-2", name: "Marcus Johnson", role: "CTO", image: "/assets/placeholders/avatar-placeholder.svg", bio: "Built infrastructure at scale. Open source advocate.", social: { twitter: "#", linkedin: "#", }, }, { id: "member-3", name: "Emily Rodriguez", role: "Head of Design", image: "/assets/placeholders/avatar-placeholder.svg", bio: "Award-winning designer. Previously at DesignStudio.", social: { linkedin: "#", }, }, { id: "member-4", name: "David Kim", role: "Head of Engineering", image: "/assets/placeholders/avatar-placeholder.svg", bio: "Full-stack expert. Loves building developer tools.", social: { twitter: "#", linkedin: "#", }, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Team01({ heading = "Meet our team", description = "We're a passionate group of people working together to build something amazing.", members = defaultMembers, className, }: Team01Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Team Grid */}

{members.map((member) => (

{/* Avatar */}

{/* Info */}

{member.name}

{member.role}

{member.bio && (

{member.bio}

)} {/* Social Links */} {member.social && (

{member.social.twitter && ( )} {member.social.linkedin && ( )}

)}

))}

) } export default Team01 export { Team01, type Team01Props, type TeamMember, type SocialLinks }