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