Add reusable star count component with abbreviated default to 1.1k (#159)

Co-authored-by: Chris Tate <ctate@users.noreply.github.com>

Author: ctate

components/github-stars-button.tsx

@@ -2,19 +2,20 @@
 
 import { Button } from '@/components/ui/button'
 import { GitHubIcon } from '@/components/icons/github-icon'
+import { formatAbbreviatedNumber } from '@/lib/utils/format-number'
 
 const GITHUB_REPO_URL = 'https://github.com/vercel-labs/coding-agent-template'
 
 interface GitHubStarsButtonProps {
   initialStars?: number
 }
 
-export function GitHubStarsButton({ initialStars = 1056 }: GitHubStarsButtonProps) {
+export function GitHubStarsButton({ initialStars = 1100 }: GitHubStarsButtonProps) {
   return (
     <Button asChild variant="ghost" size="sm" className="h-8 px-2 sm:px-3 gap-1.5">
       <a href={GITHUB_REPO_URL} target="_blank" rel="noopener noreferrer" className="flex items-center">
         <GitHubIcon className="h-3.5 w-3.5" />
-        <span className="text-sm">{initialStars.toLocaleString()}</span>
+        <span className="text-sm">{formatAbbreviatedNumber(initialStars)}</span>
       </a>
     </Button>
   )

lib/utils/format-number.ts

@@ -0,0 +1,27 @@
+/**
+ * Formats a number into an abbreviated form (e.g., 1.1k, 2.5M)
+ *
+ * @param num - The number to format
+ * @returns The formatted string
+ *
+ * @example
+ * formatAbbreviatedNumber(1109) // "1.1k"
+ * formatAbbreviatedNumber(1500) // "1.5k"
+ * formatAbbreviatedNumber(1000000) // "1M"
+ * formatAbbreviatedNumber(500) // "500"
+ */
+export function formatAbbreviatedNumber(num: number): string {
+  if (num >= 1000000) {
+    const formatted = (num / 1000000).toFixed(1)
+    // Remove .0 if present
+    return formatted.endsWith('.0') ? `${Math.floor(num / 1000000)}M` : `${formatted}M`
+  }
+
+  if (num >= 1000) {
+    const formatted = (num / 1000).toFixed(1)
+    // Remove .0 if present
+    return formatted.endsWith('.0') ? `${Math.floor(num / 1000)}k` : `${formatted}k`
+  }
+
+  return num.toString()
+}