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
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)")}
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 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>

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

@@ -89,31 +89,24 @@ 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`}>
<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"
>
{/* 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
e.currentTarget.src = "/default-profile.png";
}}
/>
{/* Username */}
<p className="text-lg">{streamer.username}</p>
{/* Follow/Unfollow Button */}
<FollowUserButton
user={{
user_id: streamer.user_id,
@@ -124,12 +117,18 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
</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 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"
@@ -145,11 +144,13 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
{category.category_name}
</div>
</div>
)
})}
))}
</div>
)};
) : (
<p className="text-center text-white">No followed categories.</p>
)}
</div>
)}
</div>
</div>
</DynamicPageContent >