UPDATE/FEAT: Proper handling of profile pictures where a fallback to the default pfp is used;
REFACTOR: Remove unnecessary props from users on `ResultsPage`; REFACTOR: General formatting
This commit is contained in:
Chris-1010
@@ -14,343 +14,295 @@ import { getCategoryThumbnail } from "../utils/thumbnailUtils";
|
||||
import { useSameUser } from "../hooks/useSameUser";
|
||||
|
||||
interface UserProfileData {
|
||||
id: number;
|
||||
username: string;
|
||||
bio: string;
|
||||
followerCount: number;
|
||||
isPartnered: boolean;
|
||||
isLive: boolean;
|
||||
currentStreamTitle?: string;
|
||||
currentStreamCategory?: string;
|
||||
currentStreamViewers?: number;
|
||||
currentStreamStartTime?: string;
|
||||
currentStreamThumbnail?: string;
|
||||
id: number;
|
||||
username: string;
|
||||
bio: string;
|
||||
followerCount: number;
|
||||
isPartnered: boolean;
|
||||
isLive: boolean;
|
||||
currentStreamTitle?: string;
|
||||
currentStreamCategory?: string;
|
||||
currentStreamViewers?: number;
|
||||
currentStreamStartTime?: string;
|
||||
currentStreamThumbnail?: string;
|
||||
}
|
||||
|
||||
const UserPage: React.FC = () => {
|
||||
const [userPageVariant, setUserPageVariant] = useState<
|
||||
"personal" | "streamer" | "user" | "admin"
|
||||
>("user");
|
||||
const [profileData, setProfileData] = useState<UserProfileData>();
|
||||
const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
|
||||
useFollow();
|
||||
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
||||
const { username: loggedInUsername } = useAuth();
|
||||
const { username } = useParams();
|
||||
const isUser = useSameUser({username});
|
||||
const navigate = useNavigate();
|
||||
const [userPageVariant, setUserPageVariant] = useState<"personal" | "streamer" | "user" | "admin">("user");
|
||||
const [profileData, setProfileData] = useState<UserProfileData>();
|
||||
const { isFollowing, checkFollowStatus, followUser, unfollowUser } = useFollow();
|
||||
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
||||
const { username: loggedInUsername } = useAuth();
|
||||
const { username } = useParams();
|
||||
const isUser = useSameUser({ username });
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Saves uploaded image as profile picture for the user
|
||||
const saveUploadedImage = async (event) => {
|
||||
const img = event.target.files[0];
|
||||
if (img) {
|
||||
const formData = new FormData();
|
||||
formData.append('image', img);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/user/profile_picture/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log("Success");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Failure");
|
||||
}
|
||||
}
|
||||
};
|
||||
// Saves uploaded image as profile picture for the user
|
||||
const saveUploadedImage = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = event.target.files;
|
||||
if (!files) return;
|
||||
const img = files[0];
|
||||
if (img) {
|
||||
const formData = new FormData();
|
||||
formData.append("image", img);
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch user profile data
|
||||
fetch(`/api/user/${username}`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setProfileData({
|
||||
id: data.user_id,
|
||||
username: data.username,
|
||||
bio: data.bio || "This user hasn't written a bio yet.",
|
||||
followerCount: data.num_followers || 0,
|
||||
isPartnered: data.isPartnered || false,
|
||||
isLive: data.is_live,
|
||||
currentStreamTitle: "",
|
||||
currentStreamCategory: "",
|
||||
currentStreamViewers: 0,
|
||||
currentStreamThumbnail: "",
|
||||
});
|
||||
try {
|
||||
const response = await fetch("/api/user/profile_picture/upload", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (data.is_live) {
|
||||
// Fetch stream data for this streamer
|
||||
fetch(`/api/streams/${data.user_id}/data`)
|
||||
.then((res) => res.json())
|
||||
.then((streamData) => {
|
||||
setProfileData((prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
return {
|
||||
...prevData,
|
||||
currentStreamTitle: streamData.title,
|
||||
currentStreamCategory: streamData.category_id,
|
||||
currentStreamViewers: streamData.num_viewers,
|
||||
currentStreamStartTime: streamData.start_time,
|
||||
currentStreamThumbnail: getCategoryThumbnail(
|
||||
streamData.category_name,
|
||||
streamData.thumbnail
|
||||
),
|
||||
};
|
||||
});
|
||||
let variant: "user" | "streamer" | "personal" | "admin";
|
||||
if (username === loggedInUsername) variant = "personal";
|
||||
else if (streamData.title) variant = "streamer";
|
||||
// else if (data.isAdmin) variant = "admin";
|
||||
else variant = "user";
|
||||
setUserPageVariant(variant);
|
||||
})
|
||||
.catch((err) => console.error("Error fetching stream data:", err));
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Error fetching profile data:", err);
|
||||
navigate("/404");
|
||||
});
|
||||
if (response.ok) {
|
||||
console.log("Success");
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Failure");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Check if the *logged-in* user is following this user
|
||||
if (loggedInUsername && username) checkFollowStatus(username);
|
||||
}, [username]);
|
||||
useEffect(() => {
|
||||
// Fetch user profile data
|
||||
fetch(`/api/user/${username}`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setProfileData({
|
||||
id: data.user_id,
|
||||
username: data.username,
|
||||
bio: data.bio || "This user hasn't written a bio yet.",
|
||||
followerCount: data.num_followers || 0,
|
||||
isPartnered: data.isPartnered || false,
|
||||
isLive: data.is_live,
|
||||
currentStreamTitle: "",
|
||||
currentStreamCategory: "",
|
||||
currentStreamViewers: 0,
|
||||
currentStreamThumbnail: "",
|
||||
});
|
||||
|
||||
if (!profileData) return <LoadingScreen />;
|
||||
console.log(isUser)
|
||||
return (
|
||||
<DynamicPageContent
|
||||
className={`min-h-screen text-white flex flex-col`}
|
||||
>
|
||||
<div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
|
||||
<div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
|
||||
{/* Profile Section - TOP */}
|
||||
if (data.is_live) {
|
||||
// Fetch stream data for this streamer
|
||||
fetch(`/api/streams/${data.user_id}/data`)
|
||||
.then((res) => res.json())
|
||||
.then((streamData) => {
|
||||
setProfileData((prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
return {
|
||||
...prevData,
|
||||
currentStreamTitle: streamData.title,
|
||||
currentStreamCategory: streamData.category_id,
|
||||
currentStreamViewers: streamData.num_viewers,
|
||||
currentStreamStartTime: streamData.start_time,
|
||||
currentStreamThumbnail: getCategoryThumbnail(streamData.category_name, streamData.thumbnail),
|
||||
};
|
||||
});
|
||||
let variant: "user" | "streamer" | "personal" | "admin";
|
||||
if (username === loggedInUsername) variant = "personal";
|
||||
else if (streamData.title) variant = "streamer";
|
||||
// else if (data.isAdmin) variant = "admin";
|
||||
else variant = "user";
|
||||
setUserPageVariant(variant);
|
||||
})
|
||||
.catch((err) => console.error("Error fetching stream data:", err));
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Error fetching profile data:", err);
|
||||
navigate("/404");
|
||||
});
|
||||
|
||||
<div
|
||||
id="profile"
|
||||
className="col-span-4 row-span-1 h-full bg-[var(--user-bg)]
|
||||
// Check if the *logged-in* user is following this user
|
||||
if (loggedInUsername && username) checkFollowStatus(username);
|
||||
}, [username]);
|
||||
|
||||
if (!profileData) return <LoadingScreen />;
|
||||
|
||||
return (
|
||||
<DynamicPageContent className="min-h-screen text-white flex flex-col">
|
||||
<div className="flex justify-evenly self-center items-center h-full px-4 pt-14 pb-8 mx-auto max-w-[80vw] w-full">
|
||||
<div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
|
||||
{/* Profile Section - TOP */}
|
||||
|
||||
<div
|
||||
id="profile"
|
||||
className="col-span-4 row-span-1 h-full bg-[var(--user-bg)]
|
||||
rounded-[30px] p-3 shadow-lg
|
||||
relative flex flex-col items-center"
|
||||
>
|
||||
{/* Border Overlay (Always on Top) */}
|
||||
<div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
|
||||
>
|
||||
{/* Border Overlay (Always on Top) */}
|
||||
<div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
|
||||
|
||||
{/* Background Box */}
|
||||
<div
|
||||
className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px]
|
||||
{/* Background Box */}
|
||||
<div
|
||||
className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px]
|
||||
bg-[var(--user-box)] z-10 flex-shrink justify-center"
|
||||
style={{ boxShadow: "var(--user-box-shadow)" }}
|
||||
>
|
||||
{/* <div className="absolute top-4 w-[99.8%] h-[1vh] min-h-[1em] max-h-[2em] bg-[var(--user-box-strip)]"></div> */}
|
||||
</div>
|
||||
{/* Profile Picture */}
|
||||
<div
|
||||
className="relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
|
||||
style={{ boxShadow: "var(--user-box-shadow)" }}
|
||||
>
|
||||
{/* <div className="absolute top-4 w-[99.8%] h-[1vh] min-h-[1em] max-h-[2em] bg-[var(--user-box-strip)]"></div> */}
|
||||
</div>
|
||||
{/* Profile Picture */}
|
||||
<div
|
||||
className="relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
|
||||
rounded-full flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20"
|
||||
style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
|
||||
>
|
||||
<label
|
||||
className={`relative ${isUser ? "cursor-pointer group" : ""} overflow-visible`}
|
||||
>
|
||||
{/* If user is live then displays a live div */}
|
||||
{Boolean(profileData.isLive) && (
|
||||
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-red-600 text-white text-sm font-bold py-1 sm:px-5 px-4 z-30 flex items-center justify-center rounded-tr-xl rounded-bl-xl rounded-tl-xl rounded-br-xl">
|
||||
LIVE
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src="/images/monkey.png"
|
||||
alt={`${profileData.username}'s profile`}
|
||||
className="sm:w-full h-full object-cover rounded-full relative z-0"
|
||||
/>
|
||||
style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
|
||||
>
|
||||
<label className={`relative ${isUser ? "cursor-pointer group" : ""} overflow-visible`}>
|
||||
{/* If user is live then displays a live div */}
|
||||
{Boolean(profileData.isLive) && (
|
||||
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-red-600 text-white text-sm font-bold py-1 sm:px-5 px-4 z-30 flex items-center justify-center rounded-tr-xl rounded-bl-xl rounded-tl-xl rounded-br-xl">
|
||||
LIVE
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={`/user/${profileData.username}/profile_picture`}
|
||||
onError={(e) => {
|
||||
e.currentTarget.src = "/images/pfps/default.png";
|
||||
e.currentTarget.onerror = null;
|
||||
}}
|
||||
alt={`${profileData.username}'s profile`}
|
||||
className="sm:w-full h-full object-cover rounded-full relative z-0"
|
||||
/>
|
||||
|
||||
{/* If current user is the profile user then allow profile picture swap */}
|
||||
{isUser && (
|
||||
<>
|
||||
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<CameraIcon
|
||||
size={32}
|
||||
className="text-white bg-black/50 p-1 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
className="hidden"
|
||||
onChange={saveUploadedImage}
|
||||
accept="image/*" />
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
{/* If current user is the profile user then allow profile picture swap */}
|
||||
{isUser && (
|
||||
<>
|
||||
<div className="absolute top-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
|
||||
<div className="absolute top-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<CameraIcon size={32} className="text-white bg-black/50 p-1 rounded-full" />
|
||||
</div>
|
||||
<input type="file" className="hidden" onChange={saveUploadedImage} accept="image/*" />
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Username - Now Directly Below PFP */}
|
||||
<h1 className="text-[var(--user-name)] text-[1.5em] sm:text-[2em] font-bold -mt-[45px] sm:-mt-[90px] text-center">
|
||||
{profileData.username}
|
||||
</h1>
|
||||
{/* Username - Now Directly Below PFP */}
|
||||
<h1 className="text-[var(--user-name)] text-[1.5em] sm:text-[2em] font-bold -mt-[45px] sm:-mt-[90px] text-center">
|
||||
{profileData.username}
|
||||
</h1>
|
||||
|
||||
{/* Follower Count */}
|
||||
{userPageVariant === "streamer" && (
|
||||
<>
|
||||
<div className="flex items-center space-x-2 mb-6">
|
||||
<span className="text-gray-400">
|
||||
{profileData.followerCount.toLocaleString()} followers
|
||||
</span>
|
||||
{profileData.isPartnered && (
|
||||
<span className="bg-purple-600 text-white text-sm px-2 py-1 rounded">
|
||||
Partner
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Follower Count */}
|
||||
{userPageVariant === "streamer" && (
|
||||
<>
|
||||
<div className="flex items-center space-x-2 mb-6">
|
||||
<span className="text-gray-400">{profileData.followerCount.toLocaleString()} followers</span>
|
||||
{profileData.isPartnered && <span className="bg-purple-600 text-white text-sm px-2 py-1 rounded">Partner</span>}
|
||||
</div>
|
||||
|
||||
{/* (Un)Follow Button */}
|
||||
{!isFollowing ? (
|
||||
<Button
|
||||
extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
|
||||
onClick={() => followUser(profileData.id, setShowAuthModal)}
|
||||
>
|
||||
Follow
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
extraClasses="w-full bg-[#a80000]"
|
||||
onClick={() =>
|
||||
unfollowUser(profileData?.id, setShowAuthModal)
|
||||
}
|
||||
>
|
||||
Unfollow
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* (Un)Follow Button */}
|
||||
{!isFollowing ? (
|
||||
<Button
|
||||
extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
|
||||
onClick={() => followUser(profileData.id, setShowAuthModal)}
|
||||
>
|
||||
Follow
|
||||
</Button>
|
||||
) : (
|
||||
<Button extraClasses="w-full bg-[#a80000] z-50" onClick={() => unfollowUser(profileData?.id, setShowAuthModal)}>
|
||||
Unfollow
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="settings"
|
||||
className="col-span-1 bg-[var(--user-sideBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
|
||||
>
|
||||
{/* User Type (e.g., "USER") */}
|
||||
<small className="text-green-400">
|
||||
{userPageVariant.toUpperCase()}
|
||||
</small>
|
||||
<div
|
||||
id="settings"
|
||||
className="col-span-1 bg-[var(--user-sideBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
|
||||
>
|
||||
{/* User Type (e.g., "USER") */}
|
||||
<small className="text-green-400">{userPageVariant.toUpperCase()}</small>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<h2 className="text-xl font-semibold mb-3">
|
||||
About {profileData.username}
|
||||
</h2>
|
||||
<p className="text-gray-300 whitespace-pre-wrap">
|
||||
{profileData.bio}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 text-center">
|
||||
<h2 className="text-xl font-semibold mb-3">About {profileData.username}</h2>
|
||||
<p className="text-gray-300 whitespace-pre-wrap">{profileData.bio}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
<div
|
||||
id="content"
|
||||
className="col-span-2 bg-[var(--user-contentBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
|
||||
>
|
||||
{userPageVariant === "streamer" && (
|
||||
<>
|
||||
{profileData.isLive ? (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">
|
||||
Currently Live!
|
||||
</h2>
|
||||
<StreamListItem
|
||||
id={profileData.id}
|
||||
title={profileData.currentStreamTitle || ""}
|
||||
streamCategory=""
|
||||
username=""
|
||||
viewers={profileData.currentStreamViewers || 0}
|
||||
thumbnail={profileData.currentStreamThumbnail}
|
||||
onItemClick={() => {
|
||||
navigate(`/${profileData.username}`);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<h1>Currently not live</h1>
|
||||
)}
|
||||
{/* Content Section */}
|
||||
<div
|
||||
id="content"
|
||||
className="col-span-2 bg-[var(--user-contentBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
|
||||
>
|
||||
{userPageVariant === "streamer" && (
|
||||
<>
|
||||
{profileData.isLive ? (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">Currently Live!</h2>
|
||||
<StreamListItem
|
||||
id={profileData.id}
|
||||
title={profileData.currentStreamTitle || ""}
|
||||
streamCategory=""
|
||||
username=""
|
||||
viewers={profileData.currentStreamViewers || 0}
|
||||
thumbnail={profileData.currentStreamThumbnail}
|
||||
onItemClick={() => {
|
||||
navigate(`/${profileData.username}`);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<h1>Currently not live</h1>
|
||||
)}
|
||||
|
||||
{/* ↓↓ VODS ↓↓ */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
|
||||
<div className="text-gray-400 rounded-none">
|
||||
No past broadcasts found
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{/* ↓↓ VODS ↓↓ */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
|
||||
<div className="text-gray-400 rounded-none">No past broadcasts found</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{userPageVariant === "user" && (
|
||||
<>
|
||||
{/* ↓↓ VODS ↓↓ */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
|
||||
<div className="text-gray-400 rounded-none">
|
||||
No past broadcasts found
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{userPageVariant === "user" && (
|
||||
<>
|
||||
{/* ↓↓ VODS ↓↓ */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
|
||||
<div className="text-gray-400 rounded-none">No past broadcasts found</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="mini"
|
||||
className="bg-[var(--user-sideBox)] col-span-1 rounded-lg text-center items-center justify-center
|
||||
<div
|
||||
id="mini"
|
||||
className="bg-[var(--user-sideBox)] col-span-1 rounded-lg text-center items-center justify-center
|
||||
flex flex-col flex-grow gap-4 p-[2rem]"
|
||||
>
|
||||
<div
|
||||
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
||||
>
|
||||
<div
|
||||
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
||||
flex items-center justify-center w-full p-4 content-start"
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
|
||||
}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<button
|
||||
className="text-[var(--follow-text)] whitespace-pre-wrap"
|
||||
onClick={() => navigate(`/user/${username}/following`)}
|
||||
>
|
||||
Following
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
||||
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => navigate(`/user/${username}/following`)}>
|
||||
Following
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
||||
flex items-center justify-center w-full p-4 content-start"
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
|
||||
}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<ul className="list-none">
|
||||
<li className="text-[var(--follow-text)] whitespace-pre-wrap list-none">
|
||||
Streamers
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
||||
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<ul className="list-none">
|
||||
<li className="text-[var(--follow-text)] whitespace-pre-wrap list-none">Streamers</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
||||
flex items-center justify-center w-full p-4 content-start"
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
|
||||
}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<button
|
||||
onClick={() => navigate(`/user/${username}/yourCategories`)}
|
||||
>
|
||||
Categories
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||
</DynamicPageContent>
|
||||
);
|
||||
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<button onClick={() => navigate(`/user/${username}/yourCategories`)}>Categories</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||
</DynamicPageContent>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserPage;
|
||||
|
||||
Reference in New Issue
Block a user