Career Stats Glass

1// ========================================
2// CAREER STATS GLASS COMPONENT
3// Career statistics with expandable year cards
4// ========================================
5 
6import { forwardRef, useState } from "react";
7import { TrendingUp, Code, GitPullRequest, FolderGit2 } from "lucide-react";
8import { cn } from "@/lib/utils";
9import { GlassCard } from "../ui/glass-card";
10import { YearCardGlass } from "../composite/year-card-glass";
11import "@/glass-theme.css";
12 
13export interface YearData {
14  readonly year: string | number;
15  readonly emoji: string;
16  readonly label: string;
17  readonly commits: string;
18  readonly progress: number;
19  readonly prs?: number;
20  readonly repos?: number;
21}
22 
23export interface CareerStatsGlassProps extends React.HTMLAttributes<HTMLDivElement> {
24  readonly totalCommits?: number;
25  readonly totalPRs?: number;
26  readonly totalRepos?: number;
27  readonly years?: readonly YearData[];
28}
29 
30export const CareerStatsGlass = forwardRef<HTMLDivElement, CareerStatsGlassProps>(
31  (
32    {
33      totalCommits = 2242,
34      totalPRs = 47,
35      totalRepos = 11,
36      years = [],
37      className,
38      ...props
39    },
40    ref
41  ) => {
42    const [expandedYear, setExpandedYear] = useState<string | number | null>(null);
43 
44    const handleYearClick = (year: string | number): void => {
45      setExpandedYear(expandedYear === year ? null : year);
46    };
47 
48    return (
49      <GlassCard
50        ref={ref}
51        className={cn("p-4 md:p-5 lg:p-6", className)}
52        intensity="medium"
53        hover={false}
54        {...props}
55      >
56        <h3
57          className="font-semibold flex items-center gap-2 md:gap-2.5 lg:gap-3 mb-1 text-base md:text-lg lg:text-xl"
58          style={{ color: "var(--text-primary)" }}
59        >
60          <TrendingUp className="w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6" style={{ color: "var(--text-accent)" }} />
61          Career Stats
62        </h3>
63        <p
64          className="text-xs md:text-sm lg:text-base mb-3 md:mb-4 flex items-center gap-2 md:gap-2.5 lg:gap-3 flex-wrap"
65          style={{ color: "var(--text-secondary)" }}
66        >
67          <span className="flex items-center gap-1 md:gap-1.5">
68            <Code className="w-3.5 h-3.5 md:w-4 md:h-4 lg:w-5 lg:h-5" />
69            {totalCommits.toLocaleString()} commits
70          </span>
71          <span>·</span>
72          <span className="flex items-center gap-1 md:gap-1.5">
73            <GitPullRequest className="w-3.5 h-3.5 md:w-4 md:h-4 lg:w-5 lg:h-5" />
74            {totalPRs} PRs
75// … truncated