github.tsx•1.6 kB
"use client";
import { useEffect, useState } from "react";
import { CiStar } from "react-icons/ci";
import { FaGithub } from "react-icons/fa";
import StarIcon from "../../assets/imgs/star.svg";
export default function ({
owner,
repo,
interval = 6000,
}: {
owner: string;
repo: string;
interval: number;
}) {
const [stars, setStars] = useState(0);
const fetchStars = async () => {
try {
const response = await fetch(
`https://api.github.com/repos/${owner}/${repo}`
);
const data = await response.json();
setStars(data.stargazers_count);
} catch (error) {
console.error("Error fetching star count:", error);
}
};
useEffect(() => {
fetchStars();
const intervalId = setInterval(fetchStars, interval);
return () => clearInterval(intervalId);
}, [owner, repo, interval]);
return (
<a
href="https://github.com/chatmcp/mcp-directory?utm_source=mcp.so"
target="_blank"
className="hidden md:flex w-64 mx-auto items-center border border-primary rounded-lg px-6 py-1.5 ml-4 cursor-pointer"
>
<FaGithub className="text-gray-900 w-8 h-8" />
<div className="flex flex-col items-start ml-2">
<div className="text-sm text-gray-900 font-bold">
Open-Source(
<img
src={StarIcon.src}
alt="star"
className="inline-block w-4 flex-none -mt-1"
/>
{stars})
</div>
<div className="text-xs text-gray-900 font-medium">
chatmcp/mcp-directory
</div>
</div>
</a>
);
}