ProfileChip

npx shadcn@latest add "https://designpass.dev/r/ProfileChip-TS-TW.json"

/*!
 * ProfileChip, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/profile-chip
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import PersonAvatar from "@/registry/ts-tailwind/layout/PersonAvatar";

export interface ProfileChipProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
  name: string;
  avatarSrc?: string;
  avatarAlt?: string;
  avatar?: ReactNode;
  /** Density. Default sm for bylines. */
  size?: "sm" | "md";
  /** Show the avatar. Default true. */
  showAvatar?: boolean;
}

function cx(...parts: Array<string | false | null | undefined>) {
  return parts.filter(Boolean).join(" ");
}

/**
 * Tiny PersonAvatar + name pill for dense collaborator rows and bylines.
 * Light fill + shadow (no decorative border). Stays a component, not a card block.
 */
export default function ProfileChip({
  name,
  avatarSrc,
  avatarAlt,
  avatar,
  size = "sm",
  showAvatar = true,
  className = "",
  ...rest
}: ProfileChipProps) {
  const avatarPx = size === "md" ? 28 : 24;

  return (
    <span
      {...rest}
      className={cx(
        "inline-flex items-center gap-1.5 rounded-full bg-paper py-0.5 pr-2.5 text-paper-ink shadow-sm",
        showAvatar ? "pl-0.5" : "pl-2.5",
        size === "md" ? "text-sm" : "text-xs",
        className,
      )}
    >
      {showAvatar
        ? (avatar ?? (
            <PersonAvatar src={avatarSrc} alt={avatarAlt ?? name} size={avatarPx} />
          ))
        : null}
      <span className="font-medium tracking-tight">{name}</span>
    </span>
  );
}