feat: show github stars

site/src/components/GitHubStars.tsx

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+import { Icon, faGithub } from '@rivet-gg/icons';
+
+interface GitHubStarsProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  repo?: string;
+}
+
+function formatNumber(num: number): string {
+  if (num >= 1000) {
+    return `${(num / 1000).toFixed(1)}k`;
+  }
+  return num.toString();
+}
+
+export async function GitHubStars({ repo = 'rivet-gg/rivet', ...props }: GitHubStarsProps) {
+  try {
+    const response = await fetch(`https://api.github.com/repos/${repo}`);
+    const data = await response.json();
+    const { stargazers_count: stars } = data;
+      return (
+    <a
+      href={`https://github.com/${repo}`}
+      target='_blank'
+      rel='noreferrer'
+      {...props}>
+      <Icon icon={faGithub} /> <span className="hidden md:inline">{stars ? `${formatNumber(stars)} Stars` : 'GitHub'}</span>
+    </a>
+  );
+  } catch (err) {
+    console.error('Failed to fetch stars', err);
+    return null;
+  }
+} 

site/src/components/v2/FancyHeader.tsx

@@ -10,6 +10,7 @@ import { faDiscord, faGithub, Icon } from '@rivet-gg/icons';
 import { AnimatePresence, motion } from 'unframer';
 import { HeaderPopupProductMenu } from '../HeaderPopupProductMenu';
 import { HeaderPopupSolutionsMenu } from '../HeaderPopupSolutionsMenu';
+import { GitHubStars } from '@/components/GitHubStars';
 
 type Subnav = false | 'product' | 'solutions';
 
@@ -79,9 +80,7 @@ export function FancyHeader({ active, subnav }: FancyHeaderProps) {
                   </Link>
                 </RivetHeader.NavItem>
                 <RivetHeader.NavItem asChild className='p-2'>
-                  <Link href='https://github.com/rivet-gg/rivet' target='_blank' className='text-white/90'>
-                    <Icon icon={faGithub} className='drop-shadow-md' />
-                  </Link>
+                  <GitHubStars className='text-white/90 hover:text-white transition-colors' />
                 </RivetHeader.NavItem>
                 <Button
                   variant='secondary'