import * as React from "react"
import { Globe, Link as LinkIcon, Mail } from "lucide-react"

import { cn } from "@/lib/utils"

export interface TeamMember {
  name: string
  role: string
  bio?: string
  email?: string
  /** Profile or social link */
  link?: string
  website?: string
}

export interface TeamGridProps extends React.ComponentProps<"section"> {
  members: TeamMember[]
}

const gradients = [
  "from-rose-400 to-orange-400",
  "from-sky-400 to-indigo-500",
  "from-emerald-400 to-teal-500",
  "from-amber-400 to-pink-500",
  "from-violet-400 to-fuchsia-500",
  "from-cyan-400 to-blue-500",
]

const socialClass =
  "inline-flex size-9 items-center justify-center rounded-full border bg-background text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-4 focus-visible:ring-ring/40"

function initials(name: string) {
  return name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase())
    .join("")
}

export function TeamGrid({ members, className, ...props }: TeamGridProps) {
  return (
    <section className={cn("w-full px-6 py-12", className)} {...props}>
      <ul className="mx-auto grid max-w-5xl gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {members.map((m, i) => (
          <li
            key={m.name}
            className="flex flex-col items-center rounded-2xl border bg-card p-6 text-center text-card-foreground shadow-sm"
          >
            <span
              aria-hidden
              className={cn(
                "flex size-20 items-center justify-center rounded-full bg-linear-to-br text-xl font-semibold text-white shadow-inner",
                gradients[i % gradients.length]
              )}
            >
              {initials(m.name)}
            </span>
            <h3 className="mt-4 text-base font-semibold">{m.name}</h3>
            <p className="text-sm text-muted-foreground">{m.role}</p>
            {m.bio && <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{m.bio}</p>}
            <div className="mt-4 flex items-center gap-2">
              {m.email && (
                <a href={`mailto:${m.email}`} aria-label={`Email ${m.name}`} className={socialClass}>
                  <Mail className="size-4" aria-hidden />
                </a>
              )}
              {m.link && (
                <a href={m.link} aria-label={`${m.name} on the web`} className={socialClass}>
                  <LinkIcon className="size-4" aria-hidden />
                </a>
              )}
              {m.website && (
                <a href={m.website} aria-label={`${m.name}'s website`} className={socialClass}>
                  <Globe className="size-4" aria-hidden />
                </a>
              )}
            </div>
          </li>
        ))}
      </ul>
    </section>
  )
}
Props

TeamGridProps

Install

More like this

Announcement Bar

Feature Grid

Stats Band
