"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

export interface TeamMemberSocialLink {
  label: string
  href: string
  icon: React.ReactNode
}

export interface TeamMemberProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Team member name
   */
  name: string
  /**
   * Role or title
   */
  role: string
  /**
   * Optional photo URL
   */
  photoUrl?: string
  /**
   * Short bio or summary
   */
  bio?: string
  /**
   * Social profile links
   */
  socialLinks?: TeamMemberSocialLink[]
}

const TeamMember = React.forwardRef<HTMLDivElement, TeamMemberProps>(
  (
    { className, name, role, photoUrl, bio, socialLinks = [], ...props },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn(
          "flex h-full flex-col rounded-2xl border border-border bg-card p-6",
          className
        )}
        {...props}
      >
        <div className="flex items-center gap-4">
          <div className="h-16 w-16 overflow-hidden rounded-full border border-border bg-muted">
            {photoUrl ? (
              <img
                src={photoUrl}
                alt={name}
                className="h-full w-full object-cover"
              />
            ) : (
              <div className="flex h-full w-full items-center justify-center text-lg font-semibold text-primary">
                {name
                  .split(" ")
                  .map((part) => part.charAt(0))
                  .join("")
                  .slice(0, 2)
                  .toUpperCase()}
              </div>
            )}
          </div>
          <div className="min-w-0">
            <p className="truncate text-lg font-semibold text-foreground">
              {name}
            </p>
            <p className="truncate text-sm text-muted-foreground">{role}</p>
          </div>
        </div>

        {bio && <p className="mt-4 text-sm text-muted-foreground">{bio}</p>}

        {socialLinks.length > 0 && (
          <div className="mt-5 flex flex-wrap gap-3">
            {socialLinks.map((link) => (
              <a
                key={link.label}
                href={link.href}
                aria-label={link.label}
                className="flex h-9 w-9 items-center justify-center rounded-full border border-border text-muted-foreground transition hover:text-foreground"
              >
                {link.icon}
              </a>
            ))}
          </div>
        )}
      </div>
    )
  }
)

TeamMember.displayName = "TeamMember"

export { TeamMember }
Team Member

Dependencies

Files

Installation
