chadtmiller.com/pds.js

Switch repository

Loading…

import { Avatar } from '#/components/atoms/avatar.jsx';
import { describeAuthor, initial } from '#/lib/authors.js';
import { identicon } from '#/lib/avatars.js';
import { cn } from '#/lib/utils.js';

/**
 * A commit author: their avatar and name, with the handle beside it when the
 * hosting account has claimed the ident. An unclaimed author shows the name
 * the commit carries and an initial in place of a picture.
 *
 * `avatar` false leaves the picture out, for a line of readings where the
 * name is one reading among several and a picture would set it apart from
 * the rest of them.
 */
export function AuthorLine({ ident, className, size = 'sm', avatar = true }) {
  const author = describeAuthor(ident);
  const box = size === 'md' ? 'size-6' : 'size-[18px]';

  return (
    <span
      className={cn('inline-flex min-w-0 items-center gap-1.5', className)}
      title={author.title}
    >
      {avatar && (
        <Avatar
          src={author.avatar || identicon(ident)}
          fallback={
            <span className="text-[9px] text-faint">
              {initial(author.name)}
            </span>
          }
          className={box}
        />
      )}
      <span className="truncate">{author.name}</span>
      {author.handle && (
        <span className="truncate font-mono text-[11.5px] text-faint">
          @{author.handle}
        </span>
      )}
    </span>
  );
}