react-github-permalink/src/library/GithubRepositoryLink/GithubRepositoryLinkBase.tsx at 079fe90309a4320eadee1d69e1bca760f675af71 · dwjohnston/react-github-permalink · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { PropsWithChildren } from "react";
import { GithubSvg } from "../GithubSvg/GithubSvg";
import { GithubRepositoryLinkDataResponse } from "../config/GithubPermalinkContext";
import { ErrorMessages } from "../ErrorMessages/ErrorMessages";

export type GithubRepositoryLinkBaseProps = {
  className?: string;
  repositoryLink: string;
  data: GithubRepositoryLinkDataResponse;
  variant?: "inline" | "block";
  showDescription?: boolean;
  showCounts?: boolean;
}

export function GithubRepositoryLinkBase(props: GithubRepositoryLinkBaseProps) {
  const {
    data,
    variant = "block",
    repositoryLink,
    showDescription = true,
    showCounts = true
  } = props;

  if (data.status === "ok") {
    if (variant === "inline") {
      return (
        <a href={data.htmlUrl} className="react-github-repository-link-inline">
          <GithubSvg />
          <span>{data.fullName}</span>
          {showCounts && (
            <span className="react-github-repository-link-counts">
              ⭐ {data.stargazersCount} 🍴 {data.forksCount}
            </span>
          )}
        </a>
      );
    }

    return (
      <GithubRepositoryLinkInner {...props}>
        <div className="react-github-repository-link-header">
          <div className="react-github-repository-link-repo">
            <GithubSvg />
            <a href={data.htmlUrl} className="react-github-repository-link-name">
              {data.fullName}
            </a>
          </div>
          {showCounts && (
            <div className="react-github-repository-link-stats">
              <span className="react-github-repository-link-stars">
                ⭐ {data.stargazersCount}
              </span>
              <span className="react-github-repository-link-forks">
                🍴 {data.forksCount}
              </span>
            </div>
          )}
        </div>
        {showDescription && data.description && (
          <div className="react-github-repository-link-description">
            {data.description}
          </div>
        )}
      </GithubRepositoryLinkInner>
    );
  }

  return <ErrorMessages data={data} />;
}

export function GithubRepositoryLinkInner(props: PropsWithChildren<GithubRepositoryLinkBaseProps>) {
  return (
    <div className={`react-github-repository-link ${props.className ?? ""}`}>
      {props.children}
    </div>
  );
}