38 lines
919 B
TypeScript
38 lines
919 B
TypeScript
import { useParty } from "#/hooks/use-party";
|
|
import { useUser } from "#/hooks/user";
|
|
import { initials } from "#/lib/utils";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
|
|
import {
|
|
Item,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemMedia,
|
|
ItemTitle,
|
|
} from "./ui/item";
|
|
|
|
export function UserInfo() {
|
|
const { user } = useUser();
|
|
const { party, members, isConnecting, isReconnecting } = useParty();
|
|
return (
|
|
<Item>
|
|
<ItemMedia>
|
|
<Avatar>
|
|
<AvatarImage src={user?.image || undefined} />
|
|
<AvatarFallback>{initials(user?.name || "")}</AvatarFallback>
|
|
</Avatar>
|
|
</ItemMedia>
|
|
<ItemContent>
|
|
<ItemTitle>{user?.name}</ItemTitle>
|
|
<ItemDescription>
|
|
{isConnecting
|
|
? "Connecting..."
|
|
: isReconnecting
|
|
? "Reconnecting..."
|
|
: party
|
|
? `${members.length} in party`
|
|
: "No party yet"}
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
</Item>
|
|
);
|
|
}
|