dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add: ToolTip for Follow Buttons

Browse Source
This commit is contained in:
EvanLin3141
2025-03-05 16:41:34 +00:00
parent b85cc30b28
commit e05ab5e0e0
1 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/Input/FollowButton.tsx
View File

@@ -16,6 +16,8 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
const [isFollowing, setIsFollowing] = useState<boolean | null>(category.isFollowing);
const [isLoading, setIsLoading] = useState(false);
const { followCategory, unfollowCategory } = useCategoryFollow();
const [showTip, setTip] = useState(false);
useEffect(() => {
setIsFollowing(category.isFollowing);
@@ -52,10 +54,13 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
};
return (
<div>
<button
className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[1]"
onClick={handleClick}
disabled={isLoading}
onMouseEnter={() => setTip(true)}
onMouseLeave={() => setTip(false)}
>
{isLoading ? (
<span className="text-white w-5 h-5">⏳</span>
@@ -67,6 +72,26 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
<CirclePlus className="text-white w-5 h-5" />
)}
</button>
{/* Tooltip */}
{showTip && mode === "pencil" && (
<div className="absolute top-10 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md">
Edit category
</div>
)}
{showTip && mode === "minus" && (
<div className="absolute top-10 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md">
Unfollow Category
</div>
)}
{showTip && mode === "plus" && (
<div className="absolute top-10 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md">
Follow Category
</div>
)}
</div>
);
};
export default FollowButton;