57 lines
1.6 KiB
TypeScript
57 lines
1.6 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";
|
|
|
|
export function FriendsHomeSect(
|
|
props: React.DetailedHTMLProps<
|
|
React.HTMLAttributes<HTMLDivElement>,
|
|
HTMLDivElement
|
|
>
|
|
) {
|
|
const friends = useFriendsHome();
|
|
const acct = useCurrentAccount();
|
|
|
|
if (!friends) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<div {...props}>
|
|
<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">
|
|
<div
|
|
className="flex items-center gap-4 overflow-x-auto pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
|
|
style={{
|
|
scrollSnapType: "x mandatory",
|
|
WebkitOverflowScrolling: "touch"
|
|
}}
|
|
>
|
|
<div className="w-8" />
|
|
{friends.map((a) => (
|
|
<div
|
|
key={a.id}
|
|
className="flex flex-col items-center min-w-[6.5rem]"
|
|
// style={{ scrollSnapAlign: "start" }}
|
|
>
|
|
<LazyLoadedImage
|
|
imgId={`AvatarHeadShot_${a.id}`}
|
|
alt={a.name}
|
|
className="w-24 h-24 rounded-full border-2 border-surface2 object-cover shadow"
|
|
/>
|
|
<span className="truncate text-xs text-text mt-1 text-center flex items-center justify-center gap-1">
|
|
{a.displayName || a.name}
|
|
{a.hasVerifiedBadge ? null : (
|
|
<VerifiedIcon className="text-base fill-blue w-3 h-3" />
|
|
)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
<div className="w-8" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|