GitHub Repo Card

1"use client";
2 
3import { useEffect, useState } from "react";
4import { cn } from "@/lib/utils";
5 
6interface GitHubRepoCardProps extends React.HTMLAttributes<HTMLAnchorElement> {
7  owner: string;
8  repo: string;
9  staticData?: {
10    name: string;
11    description: string | null;
12    stargazers_count: number;
13    forks_count: number;
14    language: string | null;
15  };
16}
17 
18function formatNumber(num: number): string {
19  if (num >= 1000000) {
20    return `${(num / 1000000).toFixed(1)}M`;
21  }
22  if (num >= 1000) {
23    return `${(num / 1000).toFixed(1)}K`;
24  }
25  return num.toString();
26}
27 
28const LANGUAGE_COLORS: Record<string, string> = {
29  TypeScript: "#3178c6",
30  JavaScript: "#f1e05a",
31  Python: "#3572A5",
32  Rust: "#dea584",
33  Go: "#00ADD8",
34  Java: "#b07219",
35  "C++": "#f34b7d",
36  C: "#555555",
37  Ruby: "#701516",
38  PHP: "#4F5D95",
39  Swift: "#F05138",
40  Kotlin: "#A97BFF",
41  Dart: "#00B4AB",
42  Vue: "#41b883",
43  CSS: "#563d7c",
44  HTML: "#e34c26",
45  Shell: "#89e051",
46  Scala: "#c22d40",
47  Elixir: "#6e4a7e",
48  Haskell: "#5e5086",
49  Lua: "#000080",
50  R: "#198CE7",
51  Julia: "#a270ba",
52  Clojure: "#db5855",
53  Zig: "#ec915c",
54};
55 
56function StarIcon({ className }: { className?: string }) {
57  return (
58    <svg
59      className={className}
60      viewBox="0 0 16 16"
61      fill="currentColor"
62      aria-hidden="true"
63    >
64      <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
65    </svg>
66  );
67}
68 
69function ForkIcon({ className }: { className?: string }) {
70  return (
71    <svg
72      className={className}
73      viewBox="0 0 16 16"
74      fill="currentColor"
75      aria-hidden="true"
76    >
77      <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z" />
78    </svg>
79  );
80}
81 
82function RepoIcon({ className }: { className?: string }) {
83  return (
84    <svg
85      className={className}
86      viewBox="0 0 16 16"
87      fill="currentColor"
88      aria-hidden="true"
89    >
90// … truncated