import { cn } from "../design"; import Avatar from "../avatar"; import type Nestri from "@nestri/sdk" import { Tooltip } from '@qwik-ui/headless'; import { useNavigate } from "@builder.io/qwik-city"; import { $, component$, useOnDocument, useSignal, type QRL } from "@builder.io/qwik"; type Props = { getActiveUsers$: QRL<() => Promise> getSession$: QRL<(profileID: string) => Promise> } const skeletonCrew = new Array(3).fill(0) export const HomeFriendsSection = component$(({ getActiveUsers$, getSession$ }: Props) => { const activeUsers = useSignal() const nav = useNavigate() useOnDocument("load", $(async () => { const sessionUserData = sessionStorage.getItem("active_user_data") if (!sessionUserData) { const users = await getActiveUsers$() sessionStorage.setItem("active_user_data", JSON.stringify(users)) activeUsers.value = users } else { activeUsers.value = JSON.parse(sessionUserData) } })) const onWatch = $(async (profileID: string) => { const session = await getSession$(profileID) await nav(`/play/${session?.data.id}`) }) return (

Find people to play with

{user.avatarUrl ? ( {user.username}

) : ()}

{`${user.username}`} {/* {user.status && (user.status == "active" && ())} */}

{user.status ? (user.status == "active" ? "Playing Steam" : user.status) : "Offline"}

{user.status && (user.status == "active" && ( { await onWatch(user.id) }} type="button" class="bg-gray-200 group-hover:bg-gray-300 dark:group-hover:bg-gray-700 transition-all duration-200 ease-in text-gray-600 dark:text-gray-400 dark:bg-gray-800 [&>svg]:size-5 p-2 rounded-full" > ))}

)) ) : ( skeletonCrew.map((_, key) => (

)) ) }

) })