added

components/star-button.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Star } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { toggleStar } from "@/actions/repositories";
+import { cn } from "@/lib/utils";
+
+export function StarButton({
+  repoId,
+  initialStarred,
+  initialCount,
+}: {
+  repoId: string;
+  initialStarred: boolean;
+  initialCount: number;
+}) {
+  const [starred, setStarred] = useState(initialStarred);
+  const [count, setCount] = useState(initialCount);
+  const [isPending, startTransition] = useTransition();
+
+  function handleClick() {
+    startTransition(async () => {
+      try {
+        const result = await toggleStar(repoId);
+        setStarred(result.starred);
+        setCount((c) => (result.starred ? c + 1 : c - 1));
+      } catch {}
+    });
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleClick}
+      disabled={isPending}
+      className={cn(
+        "gap-2 transition-colors",
+        starred && "bg-accent/10 border-accent/30 text-accent hover:bg-accent/20"
+      )}
+    >
+      <Star className={cn("h-4 w-4", starred && "fill-current")} />
+      <span>{starred ? "Starred" : "Star"}</span>
+      <span className="px-2 py-0.5 rounded bg-secondary text-xs font-medium">{count}</span>
+    </Button>
+  );
+}
+