dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

5
frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -111,11 +111,12 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
<div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4"> <div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4">
<div <div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300" className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 cursor-pointer"
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")} onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
onClick={() => (window.location.href = `/user/${username}/following?tab=streamers`)}
> >
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1> <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem]">Following</h1>
</div> </div>
<div id="streamers-followed" className="flex flex-col flex-grow items-center"> <div id="streamers-followed" className="flex flex-col flex-grow items-center">
<h2 className="border-b-2 border-t-2 w-[125%] text-2xl cursor-default mb-5">Streamers</h2> <h2 className="border-b-2 border-t-2 w-[125%] text-2xl cursor-default mb-5">Streamers</h2>

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}`} 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" && ( {activeTab === "streamers" && (
<div <div className="p-4 w-full">
id="followed-users" {followedStreamers.length > 0 ? (
className={`grid grid-cols-2 gap-4 p-4 w-full`}> <div id="followed-users" className="grid grid-cols-2 gap-4">
{followedStreamers.map((streamer: any) => ( {followedStreamers.map((streamer: any) => (
<div
<div key={`streamer-${streamer.username}`}
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"
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`}
{/* Profile Picture */} alt={`${streamer.username}'s profile`}
<img className="w-10 h-10 rounded-full object-cover"
src={`/user/${streamer.username}/profile_picture`} onError={(e) => {
alt={`${streamer.username}'s profile`} e.currentTarget.onerror = null;
className="w-10 h-10 rounded-full object-cover" e.currentTarget.src = "/default-profile.png";
onError={(e) => { }}
e.currentTarget.onerror = null; />
e.currentTarget.src = "/default-profile.png"; // Fallback if image fails to load <p className="text-lg">{streamer.username}</p>
}} <FollowUserButton
/> user={{
user_id: streamer.user_id,
{/* Username */} username: streamer.username,
<p className="text-lg">{streamer.username}</p> isFollowing: followingStatus[streamer.user_id] || true,
}}
{/* Follow/Unfollow Button */} />
<FollowUserButton </div>
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> </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> </div>
</div> </div>
</DynamicPageContent > </DynamicPageContent >