Initial commit

frontend/components/shared/FollowButton.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Heart } from "lucide-react";
+import { useAddFollow, useIsFollowing, useRemoveFollow } from "@/lib/hooks/useFollows";
+import { cn } from "@/lib/utils";
+
+interface FollowButtonProps {
+  type: "bill" | "member" | "topic";
+  value: string;
+  label?: string;
+}
+
+export function FollowButton({ type, value, label }: FollowButtonProps) {
+  const existing = useIsFollowing(type, value);
+  const add = useAddFollow();
+  const remove = useRemoveFollow();
+
+  const isFollowing = !!existing;
+  const isPending = add.isPending || remove.isPending;
+
+  const handleClick = () => {
+    if (isFollowing && existing) {
+      remove.mutate(existing.id);
+    } else {
+      add.mutate({ type, value });
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={isPending}
+      className={cn(
+        "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
+        isFollowing
+          ? "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
+          : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
+      )}
+    >
+      <Heart className={cn("w-3.5 h-3.5", isFollowing && "fill-current")} />
+      {isFollowing ? "Unfollow" : label || "Follow"}
+    </button>
+  );
+}