sentry/static/app/components/fileChange.tsx

import styled from '@emotion/styled';

import AvatarList from 'sentry/components/avatar/avatarList';
import FileIcon from 'sentry/components/fileIcon';
import {ListGroupItem} from 'sentry/components/listGroup';
import TextOverflow from 'sentry/components/textOverflow';
import {space} from 'sentry/styles/space';
import {AvatarUser, CommitAuthor} from 'sentry/types';

type Props = {
  authors: CommitAuthor[];
  filename: string;
  className?: string;
};

function FileChange({filename, authors, className}: Props) {
  return (
    <FileItem className={className}>
      <Filename>
        <StyledFileIcon fileName={filename} />
        <TextOverflow>{filename}</TextOverflow>
      </Filename>
      <div>
        <AvatarList
          users={authors as AvatarUser[]}
          avatarSize={25}
          typeMembers="authors"
        />
      </div>
    </FileItem>
  );
}

const FileItem = styled(ListGroupItem)`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const Filename = styled('div')`
  font-size: ${p => p.theme.fontSizeMedium};
  display: grid;
  gap: ${space(1)};
  margin-right: ${space(3)};
  align-items: center;
  grid-template-columns: max-content 1fr;
`;

const StyledFileIcon = styled(FileIcon)`
  color: ${p => p.theme.gray200};
  border-radius: 3px;
`;

export default FileChange;