GitHub Profile Card

1"use client";
2 
3import { useEffect, useState } from "react";
4import { cn } from "@/lib/utils";
5 
6interface ProfileData {
7  login: string;
8  name: string | null;
9  avatar_url: string;
10  bio: string | null;
11  public_repos: number;
12  followers: number;
13  following: number;
14  company: string | null;
15  location: string | null;
16  blog: string | null;
17  twitter_username: string | null;
18}
19 
20interface GitHubProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
21  username: string;
22  staticData?: ProfileData;
23  showStats?: boolean;
24}
25 
26function formatNumber(num: number): string {
27  if (num >= 1000000) {
28    return `${(num / 1000000).toFixed(1)}M`;
29  }
30  if (num >= 1000) {
31    return `${(num / 1000).toFixed(1)}K`;
32  }
33  return num.toString();
34}
35 
36function LocationIcon({ className }: { className?: string }) {
37  return (
38    <svg
39      className={className}
40      viewBox="0 0 16 16"
41      fill="currentColor"
42      aria-hidden="true"
43    >
44      <path d="m12.596 11.596-3.535 3.536a1.5 1.5 0 0 1-2.122 0l-3.535-3.536a6.5 6.5 0 1 1 9.192 0ZM8 14.5l3.535-3.535a5.5 5.5 0 1 0-7.07 0L8 14.5Zm0-6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm0 1a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z" />
45    </svg>
46  );
47}
48 
49function LinkIcon({ className }: { className?: string }) {
50  return (
51    <svg
52      className={className}
53      viewBox="0 0 16 16"
54      fill="currentColor"
55      aria-hidden="true"
56    >
57      <path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z" />
58    </svg>
59  );
60}
61 
62function CompanyIcon({ className }: { className?: string }) {
63  return (
64    <svg
65      className={className}
66      viewBox="0 0 16 16"
67      fill="currentColor"
68      aria-hidden="true"
69    >
70// … truncated