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 (
+
+
+
+ Star
+
+
+ {isRequesting ? : stars}
+
+
+ );
+};
+
+export default GitHubStarBadge;