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

55
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);
@@ -30,7 +32,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
setMode((prevMode) => {
if (prevMode === "pencil") return "minus";
if (prevMode === "minus") return "plus";
return "minus";
return "minus";
});
} catch (error) {
console.error("Error toggling state:", error);
@@ -52,21 +54,44 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
};
return (
<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}
>
{isLoading ? (
<span className="text-white w-5 h-5">⏳</span>
) : mode === "pencil" ? (
<Pencil className="text-white w-5 h-5" />
) : mode === "minus" ? (
<CircleMinus className="text-white w-5 h-5" />
) : (
<CirclePlus className="text-white w-5 h-5" />
<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>
) : mode === "pencil" ? (
<Pencil className="text-white w-5 h-5" />
) : mode === "minus" ? (
<CircleMinus className="text-white w-5 h-5" />
) : (
<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>
)}
</button>
{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;