GitHub Languages

1"use client";
2 
3import { useEffect, useState } from "react";
4import { cn } from "@/lib/utils";
5 
6interface LanguageData {
7  name: string;
8  percentage: number;
9  color: string;
10}
11 
12interface GitHubLanguagesProps extends React.HTMLAttributes<HTMLDivElement> {
13  owner: string;
14  repo: string;
15  staticData?: LanguageData[];
16  showLabels?: boolean;
17}
18 
19const LANGUAGE_COLORS: Record<string, string> = {
20  TypeScript: "#3178c6",
21  JavaScript: "#f1e05a",
22  Python: "#3572A5",
23  Rust: "#dea584",
24  Go: "#00ADD8",
25  Java: "#b07219",
26  "C++": "#f34b7d",
27  C: "#555555",
28  Ruby: "#701516",
29  PHP: "#4F5D95",
30  Swift: "#F05138",
31  Kotlin: "#A97BFF",
32  Dart: "#00B4AB",
33  Vue: "#41b883",
34  CSS: "#563d7c",
35  HTML: "#e34c26",
36  Shell: "#89e051",
37  Scala: "#c22d40",
38  Elixir: "#6e4a7e",
39  Haskell: "#5e5086",
40  Lua: "#000080",
41  R: "#198CE7",
42  Julia: "#a270ba",
43  Clojure: "#db5855",
44  Zig: "#ec915c",
45  MDX: "#fcb32c",
46  SCSS: "#c6538c",
47  Svelte: "#ff3e00",
48  Astro: "#ff5a03",
49};
50 
51export function GitHubLanguages({
52  owner,
53  repo,
54  staticData,
55  showLabels = true,
56  className,
57  ...props
58}: GitHubLanguagesProps) {
59  const [data, setData] = useState<LanguageData[]>(staticData || []);
60  const [loading, setLoading] = useState(!staticData);
61  const [error, setError] = useState<string | null>(null);
62 
63  useEffect(() => {
64    if (staticData) return;
65 
66    async function fetchData() {
67      try {
68        setLoading(true);
69        setError(null);
70 
71        const response = await fetch(
72          `https://api.github.com/repos/${owner}/${repo}/languages`
73        );
74 
75        if (!response.ok) {
76          throw new Error("Failed to fetch languages");
77        }
78 
79        const languagesData: Record<string, number> = await response.json();
80        const total = Object.values(languagesData).reduce((a, b) => a + b, 0);
81 
82        const languages: LanguageData[] = Object.entries(languagesData)
83          .map(([name, bytes]) => ({
84            name,
85            percentage: (bytes / total) * 100,
86            color: LANGUAGE_COLORS[name] || "#8b8b8b",
87          }))
88          .sort((a, b) => b.percentage - a.percentage);
89 
90        setData(languages);
91      } catch (err) {
92        setError(err instanceof Error ? err.message : "Unknown error");
93      } finally {
94        setLoading(false);
95      }
96    }
97 
98    fetchData();
99  }, [owner, repo, staticData]);
100 
101  if (loading) {
102    return (
103      <div
104        data-slot="github-languages"
105        className={cn("flex flex-col gap-3", className)}
106        {...props}
107// … truncated