"use client";
import { useEffect, useState } from "react";
import posthog from "posthog-js";
function formatStars(count: number): string {
if (count >= 1000) {
const k = count / 1000;
return k % 1 === 0 ? `${k}k` : `${k.toFixed(1)}k`;
}
return String(count);
}
const GITHUB_ICON = (
);
export function GitHubStarsBadge({
location = "stars_badge",
className,
}: {
location?: string;
className?: string;
} = {}) {
const [stars, setStars] = useState(null);
useEffect(() => {
fetch("/api/github-stars")
.then((r) => r.json())
.then((d) => {
if (d.stars != null) setStars(d.stars);
})
.catch(() => {});
}, []);
if (stars === null) return null;
return (
posthog.capture("cmuxterm_github_clicked", { location })
}
className={className ?? "inline-flex items-center gap-1.5 pr-1 text-sm text-muted hover:text-foreground transition-colors animate-fade-in"}
>
{GITHUB_ICON}
{formatStars(stars)}
);
}