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

UPDATE: Added navigation to streamers page on sidebar

Browse Source 
UPDATE: Added text to following page for no search results
This commit is contained in:
JustIceO7
2025-03-06 18:49:51 +00:00
parent 4141fcd428
commit 4a27f69776
2 changed files with 59 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/pages/Following.tsx
View File

@@ -89,67 +89,68 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
className={`w-[96vw] h-full bg-slate-50/35 rounded-lg overflow-x-hidden flex flex-col text-center scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
>
{activeTab === "streamers" && (
<div
id="followed-users"
className={`grid grid-cols-2 gap-4 p-4 w-full`}>
{followedStreamers.map((streamer: any) => (
<div
key={`streamer-${streamer.username}`}
className="h-full cursor-pointer bg-black w-full py-2 rounded-lg text-white hover:text-purple-500 font-bold transition-colors flex items-center space-x-3 p-4"
>
{/* Profile Picture */}
<img
src={`/user/${streamer.username}/profile_picture`}
alt={`${streamer.username}'s profile`}
className="w-10 h-10 rounded-full object-cover"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/default-profile.png"; // Fallback if image fails to load
}}
/>
{/* Username */}
<p className="text-lg">{streamer.username}</p>
{/* Follow/Unfollow Button */}
<FollowUserButton
user={{
user_id: streamer.user_id,
username: streamer.username,
isFollowing: followingStatus[streamer.user_id] || true,
}}
/>
<div className="p-4 w-full">
{followedStreamers.length > 0 ? (
<div id="followed-users" className="grid grid-cols-2 gap-4">
{followedStreamers.map((streamer: any) => (
<div
key={`streamer-${streamer.username}`}
className="h-full cursor-pointer bg-black w-full py-2 rounded-lg text-white hover:text-purple-500 font-bold transition-colors flex items-center space-x-3 p-4"
>
<img
src={`/user/${streamer.username}/profile_picture`}
alt={`${streamer.username}'s profile`}
className="w-10 h-10 rounded-full object-cover"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/default-profile.png";
}}
/>
<p className="text-lg">{streamer.username}</p>
<FollowUserButton
user={{
user_id: streamer.user_id,
username: streamer.username,
isFollowing: followingStatus[streamer.user_id] || true,
}}
/>
</div>
))}
</div>
))}
) : (
<p className="text-center text-white">No followed streamers.</p>
)}
</div>
)}
{activeTab === "categories" && (
<div id="categories-followed" className="grid grid-cols-3 gap-4 p-10 w-full">
{followedCategories.map((category) => {
return (
<div
key={category.category_id}
className="relative flex flex-col items-center justify-center rounded-lg overflow-hidden hover:shadow-lg transition-all"
onClick={() => navigate(`/category/${category.category_name}`)}
>
<FollowButton category={category} />
<img
src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
alt={category.category_name}
className="w-full h-[200px] object-cover"
/>
<div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1">
{category.category_name}
</div>
</div>
)
})}
{activeTab === "categories" && (
<div className="p-4 w-full">
{followedCategories.length > 0 ? (
<div id="categories-followed" className="grid grid-cols-3 gap-4">
{followedCategories.map((category) => (
<div
key={category.category_id}
className="relative flex flex-col items-center justify-center rounded-lg overflow-hidden hover:shadow-lg transition-all"
onClick={() => navigate(`/category/${category.category_name}`)}
>
<FollowButton category={category} />
<img
src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
alt={category.category_name}
className="w-full h-[200px] object-cover"
/>
<div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1">
{category.category_name}
</div>
</div>
))}
</div>
) : (
<p className="text-center text-white">No followed categories.</p>
)}
</div>
)};
)}
</div>
</div>
</DynamicPageContent >