From acadfe810e1dc676e69663d32f7d10a19c86c5a5 Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Tue, 28 Mar 2023 16:54:32 +0800
Subject: [PATCH] chore: update github stars badge

---
 components/ChatView/Header.tsx |  9 ++----
 components/GitHubStarBadge.tsx | 56 ++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 components/GitHubStarBadge.tsx

diff --git a/components/ChatView/Header.tsx b/components/ChatView/Header.tsx
index 54c91a8..85d519b 100644
--- a/components/ChatView/Header.tsx
+++ b/components/ChatView/Header.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useChatStore } from "@/store";
 import Icon from "../Icon";
+import GitHubStarBadge from "../GitHubStarBadge";
 
 interface Props {
   className?: string;
@@ -27,13 +28,7 @@ const Header = (props: Props) => {
           <Icon.IoIosMenu className="text-gray-600 w-full h-auto" />
         </label>
         <span className="w-auto text-left block lg:hidden">{title}</span>
-        <a
-          className="ml-1 w-10 h-10 p-1 rounded-lg hidden lg:flex flex-row justify-center items-center hover:bg-gray-100"
-          href="https://github.com/bytebase/sqlchat"
-          target="_blank"
-        >
-          <Icon.IoLogoGithub className="text-gray-600 w-6 h-auto" />
-        </a>
+        <GitHubStarBadge className="ml-2" />
       </div>
       <span className="w-auto text-center h-8 p-1 hidden lg:block">{title}</span>
       <div className="mr-2 sm:mr-3 relative flex flex-row justify-end items-center">
diff --git a/components/GitHubStarBadge.tsx b/components/GitHubStarBadge.tsx
new file mode 100644
index 0000000..4dd5b95
--- /dev/null
+++ b/components/GitHubStarBadge.tsx
@@ -0,0 +1,56 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+import Icon from "./Icon";
+
+interface Props {
+  className?: string;
+}
+
+const GitHubStarBadge = (props: Props) => {
+  const { className } = props;
+  const [stars, setStars] = useState(0);
+  const [isRequesting, setIsRequesting] = useState(true);
+
+  useEffect(() => {
+    const getRepoStarCount = async () => {
+      let starCount = 0;
+      try {
+        const { data } = await axios.get(`https://api.github.com/repos/bytebase/sqlchat`, {
+          headers: {
+            Accept: "application/vnd.github.v3.star+json",
+            Authorization: "",
+          },
+        });
+        starCount = data.stargazers_count as number;
+      } catch (error) {
+        // do nth
+      }
+
+      setStars(starCount);
+      setIsRequesting(false);
+    };
+
+    getRepoStarCount();
+  }, []);
+
+  return (
+    <a
+      className={`${
+        className || ""
+      } border rounded flex flex-row justify-start items-center text-black text-xs bg-white shadow-inner overflow-clip hover:opacity-80`}
+      href="https://github.com/bytebase/sqlchat"
+      target="_blank"
+      aria-label="Star SQL Chat on GitHub"
+    >
+      <span className="pr-1 pl-1.5 py-0.5 h-full flex flex-row justify-center items-center bg-gray-100 border-r font-medium">
+        <Icon.IoLogoGithub className="w-4 h-auto mr-0.5" />
+        <span className="mt-px">Star</span>
+      </span>
+      <div className="h-full block px-2 mt-px font-medium">
+        {isRequesting ? <Icon.BiLoaderAlt className="w-3 h-auto animate-spin opacity-70" /> : stars}
+      </div>
+    </a>
+  );
+};
+
+export default GitHubStarBadge;