feat: github star button

rivet-gg · Jan 16, 2025 · b5acd2e · b5acd2e
1 parent 55e7b20
commit b5acd2e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 8 deletions.
diff --git a/site/src/components/GitHubStars.tsx b/site/src/components/GitHubStars.tsx
@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { Icon, faGithub } from '@rivet-gg/icons';
+import { cn } from '@rivet-gg/components';
+
+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', className, ...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'
+        className={cn(
+          "md:bg-white/10 rounded-md px-4 h-10 flex items-center gap-2 md:hover:bg-white/20 transition-colors",
+          className
+        )}
+        {...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;
+  }
+} 
diff --git a/site/src/components/v2/FancyHeader.tsx b/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';
 
@@ -19,7 +20,7 @@ interface FancyHeaderProps {
   mobileBreadcrumbs?: ReactNode;
 }
 
-export function FancyHeader({ active, subnav }: FancyHeaderProps) {
+export function FancyHeader({ active, subnav, mobileBreadcrumbs }: FancyHeaderProps) {
   const [isSubnavOpen, setIsSubnavOpen] = useState<Subnav>(false);
   const prev = useRef<Subnav>(false);
 
@@ -72,24 +73,22 @@ export function FancyHeader({ active, subnav }: FancyHeaderProps) {
               </div>
             }
             links={
-              <>
-                <RivetHeader.NavItem asChild className='-m-2 p-2'>
+              <div className="flex flex-row items-center gap-4">
+                <RivetHeader.NavItem asChild className='p-2'>
                   <Link href='/discord' className='text-white/90'>
                     <Icon icon={faDiscord} className='drop-shadow-md' />
                   </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>
+                <RivetHeader.NavItem asChild className='flex'>
+                  <GitHubStars className='text-white/90 hover:text-white transition-colors w-full' />
                 </RivetHeader.NavItem>
                 <Button
                   variant='secondary'
                   asChild
                   className='font-v2 subpixel-antialiased hover:border-white/20'>
                   <Link href='https://hub.rivet.gg'>Sign In</Link>
                 </Button>
-              </>
+              </div>
             }
             mobileBreadcrumbs={<DocsMobileNavigation />}
             breadcrumbs={