mirror of
https://github.com/sqlchat/sqlchat.git
synced 2025-07-28 17:53:21 +08:00
chore: update github stars badge
This commit is contained in:
@ -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">
|
||||
|
56
components/GitHubStarBadge.tsx
Normal file
56
components/GitHubStarBadge.tsx
Normal file
@ -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;
|
Reference in New Issue
Block a user