40 lines · 1.4 KB
import { Link } from "@tanstack/react-router";
import { Avatar } from "~/ui/Avatar";
import { cn } from "~/utils/cn";

type Props = {
  authorName: string;
  /** The account that verified the commit's author email, if any. */
  authorAccount: string | null;
  avatar?: boolean;
  className?: string;
};

/**
 * A commit author: linked to their profile (with hovercard) when the commit email belongs to a verified
 * address on an account, otherwise the raw git name with a generated lava lamp, never someone else's picture.
 */
export function CommitAuthor({ authorName, authorAccount, avatar = true, className }: Props) {
  if (!authorAccount) {
    return (
      <span className={cn("inline-flex min-w-0 items-center gap-2", className)}>
        {avatar && <Avatar name={authorName} size="sm" src={null} />}
        <span className="truncate font-medium text-kumo-default">{authorName}</span>
      </span>
    );
  }
  return (
    <Link
      to="/$owner"
      params={{ owner: authorAccount }}
      activeOptions={{ exact: true, includeSearch: false }}
      activeProps={{}}
      title={authorName === authorAccount ? undefined : authorName}
      className={cn("inline-flex min-w-0 items-center gap-2 hover:text-accent-400", className)}
    >
      {avatar && <Avatar name={authorAccount} size="sm" />}
      <span className="truncate font-medium text-kumo-strong">{authorAccount}</span>
    </Link>
  );
}