Author.tsx

 1import { Link as RouterLink } from 'react-router-dom';
 2
 3import MAvatar from '@material-ui/core/Avatar';
 4import Link from '@material-ui/core/Link';
 5import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 6
 7import { AuthoredFragment } from '../graphql/fragments.generated';
 8
 9type Props = AuthoredFragment & {
10  className?: string;
11  bold?: boolean;
12};
13
14const Author = ({ author, ...props }: Props) => {
15  return (
16    <Tooltip title={`Goto the ${author.displayName}'s profile.`}>
17      <Link {...props} component={RouterLink} to={`/user/${author.id}`}>
18        {author.displayName}
19      </Link>
20    </Tooltip>
21  );
22};
23
24export const Avatar = ({ author, ...props }: Props) => {
25  if (author.avatarUrl) {
26    return <MAvatar src={author.avatarUrl} {...props} />;
27  }
28
29  return <MAvatar {...props}>{author.displayName[0]}</MAvatar>;
30};
31
32export default Author;