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