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 [isFollowing, setIsFollowing] = useState<boolean | null>(category.isFollowing);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const { followCategory, unfollowCategory } = useCategoryFollow(); const { followCategory, unfollowCategory } = useCategoryFollow();
const [showTip, setTip] = useState(false);
useEffect(() => { useEffect(() => {
setIsFollowing(category.isFollowing); setIsFollowing(category.isFollowing);
@@ -30,7 +32,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
setMode((prevMode) => { setMode((prevMode) => {
if (prevMode === "pencil") return "minus"; if (prevMode === "pencil") return "minus";
if (prevMode === "minus") return "plus"; if (prevMode === "minus") return "plus";
return "minus"; return "minus";
}); });
} catch (error) { } catch (error) {
console.error("Error toggling state:", error); console.error("Error toggling state:", error);
@@ -52,21 +54,44 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
}; };
return ( return (
<button <div>
className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[1]" <button
onClick={handleClick} className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[1]"
disabled={isLoading} onClick={handleClick}
> disabled={isLoading}
{isLoading ? ( onMouseEnter={() => setTip(true)}
<span className="text-white w-5 h-5">⏳</span> onMouseLeave={() => setTip(false)}
) : mode === "pencil" ? ( >
<Pencil className="text-white w-5 h-5" /> {isLoading ? (
) : mode === "minus" ? ( <span className="text-white w-5 h-5">⏳</span>
<CircleMinus className="text-white w-5 h-5" /> ) : mode === "pencil" ? (
) : ( <Pencil className="text-white w-5 h-5" />
<CirclePlus 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; export default FollowButton;