1
import { CSSProperties } from "react";
2
import { Avatar, Tooltip } from "antd";
3
import A from "components/misc/A";
4
import { Icon } from "@cocalc/frontend/components/icon";
5
import { trunc } from "@cocalc/util/misc";
6

7
interface Props {
8
  name: string;
9
  repo?: string; // if given, impacts links
10
  size?: number;
11
  style?: CSSProperties;
12
}
13
export default function GithubAvatar({ style, size = 195 / 2, name }: Props) {
14
  const url = `https://github.com/${name}`;
15
  return (
16
    <Tooltip
17
      title={`Open the GitHub pag ${url} in a new tab.`}
18
      placement="left"
19
    >
20
      <div style={{ textAlign: "center", ...style }}>
21
        <A href={url}>
22
          <Avatar
23
            style={{ borderRadius: "7.5px", border: "1px solid #eee" }}
24
            shape="square"
25
            size={size}
26
            icon={<img src={`https://avatars.githubusercontent.com/${name}`} />}
27
          />
28
          <div>
29
            <Icon name="external-link" /> {trunc(name, 28)}{" "}
30
            <Icon name="github" />
31
          </div>
32
        </A>
33
      </div>
34
    </Tooltip>
35
  );
36
}
37

38