45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|