chore: update github stars badge

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
+        <GitHubStarBadge className="ml-2" />
-          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>
       </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">

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;