skidding

app/users/[id]/content.tsx

@@ -4,13 +4,32 @@ import { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { notFound } from "next/navigation";
 import { Separator } from "@/components/ui/separator";
-import { getUserByUserId } from "@/lib/profile";
+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) {
@@ -34,9 +53,34 @@ export default function UserProfileContent({
 		<div className="p-4 space-y-6">
 			<UserProfileHeader user={profile} />
 			<Separator />
-			<div className="break-all whitespace-normal">
+			<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>
 	);
 }