UPDATE: Added navigation to streamers page on sidebar
UPDATE: Added text to following page for no search results
This commit is contained in:
JustIceO7
@@ -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>
|
||||||
|
|||||||
@@ -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 >
|
||||||
|
|||||||
Reference in New Issue
Block a user