Team card

import * as React from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

export type TeamMember = {
  /** Full name. Used for the image alt and the initials fallback. */
  name: string;
  /** Avatar url. Initials show while it loads or when it is missing. */
  image?: string;
};

type TeamCardProps = Omit<React.ComponentProps<typeof Card>, "children"> & {
  /** The team's name. */
  name: string;
  /** Every member. Only the first `max` get an avatar, the rest become a count. */
  members: TeamMember[];
  /** How many avatars to show before the "+n" circle. */
  max?: number;
  /** Something on the right, for example a button or a menu. Replaces the default "View" link. */
  action?: React.ReactNode;
  /** Where the team lives. Adds the "View" link and makes the name a link. */
  href?: string;
  /** "card" has its own frame; "row" has none, for stacking inside one bordered list. */
  variant?: "card" | "row";
};

function initials(name: string) {
  const parts = name.trim().split(/\s+/);
  return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
}

/**
 * An overlapping avatar stack, the team name, a member count and one action.
 * Avatars beyond `max` fold into a "+n" circle.
 */
export function TeamCard({
  name,
  members,
  max = 3,
  action,
  href,
  variant = "card",
  className,
  ...props
}: TeamCardProps) {
  const shown = members.slice(0, max);
  const rest = members.length - shown.length;
  const count = members.length === 1 ? "1 member" : `${members.length} members`;

  return (
    <Card
      size="sm"
      data-slot="team-card"
      data-variant={variant}
      className={cn("w-full", variant === "row" && "rounded-none bg-transparent shadow-none ring-0", className)}
      {...props}
    >
      <CardContent className="flex items-center gap-3">
        <div className="flex shrink-0 -space-x-1" aria-hidden="true">
          {shown.map((member) => (
            <Avatar key={member.name} className="size-7 ring-2 ring-card">
              {member.image && <AvatarImage src={member.image} alt="" />}
              <AvatarFallback className="text-xs text-foreground/70">{initials(member.name)}</AvatarFallback>
            </Avatar>
          ))}
          {rest > 0 && (
            <span className="relative inline-grid size-7 shrink-0 place-items-center rounded-full bg-muted font-mono text-xs text-foreground ring-2 ring-card">
              +{rest}
            </span>
          )}
        </div>
        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
          {href ? (
            <a
              href={href}
              className="truncate rounded-sm text-sm font-medium text-foreground outline-none hover:text-foreground/85 focus-visible:ring-2 focus-visible:ring-ring/50"
            >
              {name}
            </a>
          ) : (
            <span className="truncate text-sm font-medium text-foreground">{name}</span>
          )}
          <span className="font-mono text-xs text-muted-foreground">
            {count}
            <span className="sr-only">: {members.map((m) => m.name).join(", ")}</span>
          </span>
        </div>
        {action !== undefined ? (
          <div className="shrink-0">{action}</div>
        ) : href ? (
          <Button asChild variant="outline" size="sm" className="shrink-0 rounded-full">
            <a href={href}>
              View<span className="sr-only"> {name}</span>
            </a>
          </Button>
        ) : null}
      </CardContent>
    </Card>
  );
}