GitHub Contributions Advanced

1import * as React from "react";
2import GithubContributions, {
3  Contribution,
4} from "@/registry/github-contributions/github-contributions";
5 
6export default function GithubContributionsAdvanced({
7  data,
8  newPublicRepositories,
9}: {
10  data: Contribution[];
11  newPublicRepositories: number;
12}) {
13  return (
14    <div className="flex flex-col gap-2 w-full md:w-min">
15      <p className="text-sm text-foreground">
16        <span className="font-semibold">
17          {data.reduce((acc, item) => acc + item.count, 0)}
18        </span>{" "}
19        contributions in the last year and{" "}
20        <span className="font-semibold">{newPublicRepositories}</span> new
21        public repositories.
22      </p>
23      <GithubContributions data={data} />
24      <div className="flex items-center justify-between gap-3 w-full text-xs text-muted-foreground">
25        <a
26          href="https://docs.github.com/articles/why-are-my-contributions-not-showing-up-on-my-profile"
27          className="hover:underline underline-offset-2"
28          target="_blank"
29          rel="noopener noreferrer"
30        >
31          Learn how we count contributions
32        </a>
33        <div className="flex items-center gap-1">
34          Less
35          <div className="size-2.5 p-0 rounded-xs bg-github-0"></div>
36          <div className="size-2.5 p-0 rounded-xs bg-github-1"></div>
37          <div className="size-2.5 p-0 rounded-xs bg-github-2"></div>
38          <div className="size-2.5 p-0 rounded-xs bg-github-3"></div>
39          <div className="size-2.5 p-0 rounded-xs bg-github-4"></div>
40          More
41        </div>
42      </div>
43    </div>
44  );
45}