Follow Button

1'use client';
2 
3import React, { useState } from 'react';
4import { Button } from '@/components/ui/button';
5import { cn } from '@/lib/utils/deso';
6import { UserPlus, UserMinus } from 'lucide-react';
7import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
8 
9export interface FollowButtonProps {
10  isFollowing?: boolean;
11  className?: string;
12  onClick?: () => void;
13  variant?: 'default' | 'icon' | 'icon-only';
14  showTooltip?: boolean;
15  tooltipText?: string;
16  unfollowTooltipText?: string;
17}
18 
19export function FollowButton({
20  isFollowing: initialIsFollowing = false,
21  className,
22  onClick,
23  variant = 'default',
24  showTooltip = false,
25  tooltipText = 'Follow',
26  unfollowTooltipText = 'Unfollow',
27}: FollowButtonProps) {
28  const [isFollowing, setIsFollowing] = useState(initialIsFollowing);
29  const [isHovering, setIsHovering] = useState(false);
30 
31  const handleClick = () => {
32    setIsFollowing(!isFollowing);
33    if (onClick) {
34      onClick();
35    }
36  };
37 
38  let buttonText = 'Follow';
39  let buttonVariant: 'default' | 'outline' | 'destructive' = 'default';
40  let Icon = UserPlus;
41  let currentTooltipText = tooltipText;
42 
43  if (isFollowing) {
44    buttonText = isHovering ? 'Unfollow?' : 'Following';
45    buttonVariant = isHovering ? 'destructive' : 'outline';
46    Icon = isHovering ? UserMinus : UserPlus;
47    currentTooltipText = isHovering ? unfollowTooltipText : 'Following';
48  }
49  
50  const showIcon = variant === 'icon' || variant === 'icon-only';
51  const showText = variant === 'default' || variant === 'icon';
52 
53  const buttonContent = (
54    <Button
55      variant={buttonVariant}
56      className={cn('transition-all duration-200 flex items-center gap-2', className)}
57      onClick={handleClick}
58      onMouseEnter={() => setIsHovering(true)}
59      onMouseLeave={() => setIsHovering(false)}
60    >
61      {showIcon && <Icon className="h-4 w-4" />}
62      {showText && <span>{buttonText}</span>}
63    </Button>
64  );
65 
66  if (showTooltip) {
67    return (
68      <TooltipProvider>
69        <Tooltip>
70          <TooltipTrigger asChild>{buttonContent}</TooltipTrigger>
71          <TooltipContent>
72            <p>{currentTooltipText}</p>
73          </TooltipContent>
74        </Tooltip>
75      </TooltipProvider>
76    )
77  }
78 
79  return buttonContent;
80}