54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import { useParty } from "#/hooks/use-party";
|
|
import { useUser } from "#/hooks/user";
|
|
import { client } from "#/lib/eden";
|
|
import { initials } from "#/lib/utils";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
|
|
import { Button } from "./ui/button";
|
|
import {
|
|
Item,
|
|
ItemActions,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemMedia,
|
|
ItemTitle,
|
|
} from "./ui/item";
|
|
|
|
export function UserInfo() {
|
|
const { user } = useUser();
|
|
const { party, members, isConnecting, isReconnecting, resetParty } =
|
|
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>
|
|
<ItemActions>
|
|
{party && (
|
|
<Button
|
|
onClick={async () => {
|
|
await client.api.party.leave.post();
|
|
resetParty();
|
|
}}
|
|
>
|
|
Leave
|
|
</Button>
|
|
)}
|
|
</ItemActions>
|
|
</Item>
|
|
);
|
|
}
|