diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx index 927fe03..d1b1d65 100644 --- a/src/components/site-header.tsx +++ b/src/components/site-header.tsx @@ -1,6 +1,7 @@ import Link from "next/link"; import { UserProfile } from "@/components/auth/user-profile"; import { ModeToggle } from "./ui/mode-toggle"; +import { GitHubStars } from "./ui/github-stars"; export function SiteHeader() { return ( @@ -16,6 +17,7 @@ export function SiteHeader() {
+
diff --git a/src/components/ui/github-stars.tsx b/src/components/ui/github-stars.tsx new file mode 100644 index 0000000..23bbfaf --- /dev/null +++ b/src/components/ui/github-stars.tsx @@ -0,0 +1,53 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { Github } from "lucide-react"; +import { Button } from "@/components/ui/button"; + +interface GitHubStarsProps { + repo: string; +} + +export function GitHubStars({ repo }: GitHubStarsProps) { + const [stars, setStars] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + async function fetchStars() { + try { + const response = await fetch(`https://api.github.com/repos/${repo}`); + if (response.ok) { + const data = await response.json(); + setStars(data.stargazers_count); + } + } catch (error) { + console.error("Failed to fetch GitHub stars:", error); + } finally { + setLoading(false); + } + } + + fetchStars(); + }, [repo]); + + const formatStars = (count: number) => { + if (count >= 1000) { + return `${(count / 1000).toFixed(1)}k`; + } + return count.toString(); + }; + + return ( + + ); +} \ No newline at end of file