"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

interface FollowButtonProps {
  initialCount?: number;
  defaultFollowing?: boolean;
  className?: string;
  onToggle?: (following: boolean) => void;
}

const FollowIcon = ({ className, checked }: { className?: string; checked: boolean }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden
  >
    {checked ? (
      <path d="M6.5 12.5l3 3 8-8" />
    ) : (
      <>
        <path d="M12 6v12" />
        <path d="M6 12h12" />
      </>
    )}
  </svg>
);

export function FollowButton({
  initialCount = 2560,
  defaultFollowing = false,
  className,
  onToggle,
}: FollowButtonProps) {
  const [following, setFollowing] = React.useState(defaultFollowing);
  const [count, setCount] = React.useState(initialCount);

  const handleToggle = () => {
    setFollowing((prev) => {
      const next = !prev;
      setCount((current) => Math.max(0, current + (next ? 1 : -1)));
      onToggle?.(next);
      return next;
    });
  };

  return (
    <div className={cn("flex flex-wrap items-center gap-3", className)}>
      <button
        type="button"
        onClick={handleToggle}
        className={cn(
          "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2",
          "text-sm font-semibold transition",
          "focus-visible:outline-none",
          following
            ? "bg-muted text-foreground hover:bg-background"
            : "bg-accent text-accent-foreground hover:bg-accent"
        )}
        aria-pressed={following}
      >
        <FollowIcon className="h-4 w-4" checked={following} />
        {following ? "Following" : "Follow"}
      </button>
      <span className="text-xs font-medium text-muted-foreground">
        {count.toLocaleString()} followers
      </span>
    </div>
  );
}
Follow Button

Dependencies

Files

Installation
