87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { notFound } from "next/navigation";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { getUserByUserId, UserProfileDetails } from "@/lib/profile";
|
|
import { UserProfileHeader } from "@/components/roblox/UserProfileHeader";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { ShieldBanIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useFriendsHome } from "@/hooks/roblox/useFriends";
|
|
import { FriendCarousel } from "@/components/roblox/FriendCarousel";
|
|
|
|
interface UserProfileContentProps {
|
|
userId: string;
|
|
}
|
|
|
|
function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
|
|
const theirFriends = useFriendsHome(profile.id.toString());
|
|
|
|
return (
|
|
<>
|
|
{!theirFriends && <Skeleton className="w-full h-64" />}
|
|
{/*
|
|
//@ts-expect-error */}
|
|
<FriendCarousel title={<span className="pl-4">Friends</span>} className="overflow-visible -ml-4" friends={theirFriends || []} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function UserProfileContent({
|
|
userId
|
|
}: UserProfileContentProps) {
|
|
const { data: profile, isLoading } = useQuery({
|
|
queryKey: ["user-profile", userId],
|
|
queryFn: () => getUserByUserId(userId),
|
|
enabled: !!userId
|
|
});
|
|
|
|
// Set dynamic document title
|
|
useEffect(() => {
|
|
if (profile?.displayName) {
|
|
document.title = `${profile.displayName}'s profile | ocbwoy3-chan's roblox`;
|
|
}
|
|
}, [profile]);
|
|
|
|
if (isLoading) return <div className="p-4">Loading user profile...</div>;
|
|
if (!profile) notFound();
|
|
|
|
return (
|
|
<div className="p-4 space-y-6">
|
|
<UserProfileHeader user={profile} />
|
|
<Separator />
|
|
<div className="break-all pl-4 whitespace-pre-line">
|
|
{profile.description}
|
|
</div>
|
|
{profile.isBanned && (
|
|
<>
|
|
<div className="justify-center w-full pt-6">
|
|
<Alert
|
|
variant="default"
|
|
className="bg-base/50 space-x-2"
|
|
>
|
|
<ShieldBanIcon />
|
|
<AlertTitle>This user is banned</AlertTitle>
|
|
<AlertDescription>
|
|
Their Roblox account appears to be terminated
|
|
from the platform. You can see their inventory
|
|
and RAP history on{" "}
|
|
<Link
|
|
className="text-blue decoration-blue underline"
|
|
href={`https://www.rolimons.com/player/${profile.id}`}
|
|
>
|
|
Rolimons
|
|
</Link>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
</>
|
|
)}
|
|
{!profile.isBanned && <ProfileMoreDetails profile={profile} />}
|
|
</div>
|
|
);
|
|
}
|