120 lines
3.5 KiB
TypeScript
120 lines
3.5 KiB
TypeScript
import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
|
|
import { useFriendsHome } from "@/hooks/roblox/useFriendsHome";
|
|
import LazyLoadedImage from "./lazyLoadedImage";
|
|
import React from "react";
|
|
import { VerifiedIcon } from "./RobloxIcons";
|
|
import { useFriendsPresence } from "@/hooks/roblox/usePresence";
|
|
import { StupidHoverThing } from "./MiscStuff";
|
|
|
|
export function FriendsHomeSect(
|
|
props: React.DetailedHTMLProps<
|
|
React.HTMLAttributes<HTMLDivElement>,
|
|
HTMLDivElement
|
|
>
|
|
) {
|
|
const friends = useFriendsHome();
|
|
const acct = useCurrentAccount();
|
|
const presence = useFriendsPresence(
|
|
(!!friends ? friends : []).map((f) => f.id)
|
|
);
|
|
|
|
if (!friends) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<div {...props}>
|
|
{/* <button onClick={()=>console.log(acct,presence,friends)}>debug</button> */}
|
|
<h1 className="text-2xl pb-2 pl-4">Friends</h1>
|
|
<div className="bg-base p-4 rounded-xl flex flex-col gap-2 px-4 no-scrollbar">
|
|
<div
|
|
className="flex items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
|
|
style={{
|
|
scrollSnapType: "x mandatory",
|
|
WebkitOverflowScrolling: "touch",
|
|
scrollbarWidth: "none"
|
|
}}
|
|
>
|
|
<div className="w-8" />
|
|
{friends.map((a) => {
|
|
const userStatus = presence.find(
|
|
(b) => b.userId === a.id
|
|
);
|
|
const userPresence = userStatus?.userPresenceType || 0;
|
|
const borderColor =
|
|
userPresence === 1
|
|
? "border-blue bg-blue/50"
|
|
: userPresence === 2
|
|
? "border-green bg-green/50"
|
|
: userPresence === 3
|
|
? "border-yellow bg-yellow/50"
|
|
: userPresence === 0
|
|
? "border-surface2 bg-surface2/50"
|
|
: "border-red bg-red/50";
|
|
const textColor =
|
|
userPresence === 1
|
|
? "text-blue"
|
|
: userPresence === 2
|
|
? "text-green"
|
|
: userPresence === 3
|
|
? "text-yellow"
|
|
: userPresence === 0
|
|
? "text-surface2"
|
|
: "text-red";
|
|
const fillColor =
|
|
userPresence === 1
|
|
? "fill-blue"
|
|
: userPresence === 2
|
|
? "fill-green"
|
|
: userPresence === 3
|
|
? "fill-yellow"
|
|
: userPresence === 0
|
|
? "fill-surface2"
|
|
: "fill-red";
|
|
|
|
return (
|
|
<div
|
|
key={a.id}
|
|
className="flex flex-col min-w-[6.5rem]"
|
|
>
|
|
<LazyLoadedImage
|
|
imgId={`AvatarHeadShot_${a.id}`}
|
|
alt={a.name}
|
|
className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
|
|
/>
|
|
<span
|
|
className={`text-xs ${textColor} mt-1 text-center flex items-center justify-center gap-1 max-w-[6.5rem] overflow-hidden line-clamp-2`}
|
|
>
|
|
<StupidHoverThing
|
|
text={
|
|
<span className="space-x-1 flex items-center">
|
|
<p>{a.displayName || a.name}</p>
|
|
{!a.hasVerifiedBadge ? (
|
|
<VerifiedIcon
|
|
useDefault
|
|
className={`w-4 h-4 shrink-0`}
|
|
/>
|
|
) : null}
|
|
</span>
|
|
}
|
|
>
|
|
<span className="line-clamp-1 overflow-hidden text-ellipsis">
|
|
{a.displayName || a.name}
|
|
</span>
|
|
</StupidHoverThing>
|
|
{!a.hasVerifiedBadge ? (
|
|
<VerifiedIcon
|
|
className={`text-base ${fillColor} w-3 h-3 shrink-0`}
|
|
/>
|
|
) : null}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
<div className="w-8" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|