Merge pull request #18 from LibreSplit/github

GitHub button redesign

Author: JackTench

components.json

@@ -18,5 +18,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {}
+  "registries": {
+    "@reui": "https://reui.io/r/{name}.json"
+  }
 }

package-lock.json

@@ -21,6 +21,7 @@
     "mdast-util-from-markdown": "^2.0.2",
     "mdast-util-gfm": "^3.1.0",
     "micromark-extension-gfm": "^3.0.0",
+    "motion": "^12.23.24",
     "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-code-block": "^1.1.3",

package.json

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+
+import { Button } from "../ui/button";
+import { GithubButton } from "../ui/github-button";
+import { AppLoading } from "./AppLoading";
+import { Github } from "lucide-react";
+
+export function AppGitHubButton() {
+  const [stars, setStars] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch repo data from GitHub API.
+  useEffect(() => {
+    async function fetchStars() {
+      try {
+        const response = await fetch(
+          "https://api.github.com/repos/LibreSplit/LibreSplit",
+          {
+            headers: { Accept: "application/vnd.github+json" },
+          },
+        );
+
+        if (!response.ok)
+          throw new Error(`GitHub API error: ${response.status}`);
+
+        const data = await response.json();
+        setStars(data.stargazers_count);
+      } catch (err) {
+        setError((err as Error).message);
+      }
+    }
+
+    fetchStars();
+  }, []);
+
+  // Show whilst API request loads.
+  if (stars == null) {
+    return <AppLoading />;
+  }
+
+  // Show in the case of an error.
+  if (error) {
+    return (
+      <Button>
+        <a href="https://github.com/LibreSplit/LibreSplit">
+          <Github />
+        </a>
+      </Button>
+    );
+  }
+
+  // Show full component.
+  return (
+    <GithubButton
+      repoUrl="https://github.com/LibreSplit/LibreSplit"
+      label="GitHub"
+      initialStars={0}
+      targetStars={stars}
+    />
+  );
+}

src/components/libresplit/AppGitHubButton.tsx

@@ -1,12 +1,11 @@
-import { Button } from "../ui/button";
 import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
 } from "../ui/navigation-menu";
+import { AppGitHubButton } from "./AppGitHubButton";
 import { AppThemeToggleButton } from "./AppThemeToggleButton";
-import { Github } from "lucide-react";
 import { Link } from "react-router";
 
 export function AppNav() {
@@ -57,11 +56,7 @@ function LeftNav() {
 function RightNav() {
   return (
     <div className="flex items-center gap-2">
-      <Button>
-        <a href="https://github.com/wins1ey/LibreSplit">
-          <Github />
-        </a>
-      </Button>
+      <AppGitHubButton />
       <AppThemeToggleButton />
     </div>
   );