'use client';
import { useEffect, useState } from 'react';
import { GitFork, Star, Tag } from 'lucide-react';
import { fetchGitHubStats, formatCount, type GitHubStats } from '@/lib/github-stats';
/**
* Stars / forks / latest-release row. Renders the build-time numbers
* immediately (no layout shift, works without JS), then swaps in live ones
* from the GitHub API after hydration.
*/
export function GitHubStatsRow({
initial,
labels,
}: {
initial: GitHubStats;
labels: { stars: string; forks: string; latest: string };
}) {
const [stats, setStats] = useState(initial);
useEffect(() => {
let cancelled = false;
// Plain fetch, no custom headers — keeps the request preflight-free.
void fetchGitHubStats().then((live) => {
if (cancelled || !live) return;
setStats((prev) => ({ ...live, latestVersion: live.latestVersion || prev.latestVersion }));
});
return () => {
cancelled = true;
};
}, []);
return (
} label={labels.stars}>
{formatCount(stats.stars)}
} label={labels.forks}>
{formatCount(stats.forks)}
} label={labels.latest}>
{stats.latestVersion}
);
}
function Stat({
icon,
label,
children,
}: {
icon: React.ReactNode;
label: string;
children: React.ReactNode;
}) {
return (
{icon}
{label}
{children}{' '}
{label}
);
}