An avatar group that separates online and offline users into two clusters and smoothly re-animates members between clusters when someone toggles presence, with a name tooltip on hover.
"use client";
import {
UserPresenceAvatar,
type PresenceUser,
} from "@/components/ui/user-presence-avatar";
const USERS: PresenceUser[] = [
{
id: 1,
name: "Guillermo Rauch",
src: "https://avatars.spaceui.one/v1?name=guillermorauch&variant=singularity",
fallback: "GR",
online: true,
},
{
id: 2,
name: "Lee Robinson",
src: "https://avatars.spaceui.one/v1?name=leerobinson&variant=glass",
fallback: "LR",
online: true,
},
{
id: 3,
name: "Nova",
src: "https://avatars.spaceui.one/v1?name=nova&variant=pebble",
fallback: "NV",
online: true,
},
{
id: 4,
name: "Lauren Tan",
src: "https://avatars.spaceui.one/v1?name=laurentan&variant=solar-flare",
fallback: "LT",
online: true,
},
{
id: 5,
name: "Evil Rabbit",
src: "https://avatars.spaceui.one/v1?name=evilrabbit&variant=titan",
fallback: "ER",
online: false,
},
{
id: 6,
name: "Alexandr Wang",
src: "https://avatars.spaceui.one/v1?name=alexandrwang&variant=triton",
fallback: "AW",
online: false,
},
{
id: 7,
name: "Max Leiter",
src: "https://avatars.spaceui.one/v1?name=maxleiter&variant=lumina",
fallback: "ML",
online: false,
},
{
id: 8,
name: "Elon Musk",
src: "https://avatars.spaceui.one/v1?name=elonmusk&variant=shaula",
fallback: "EM",
online: false,
},
{
id: 9,
name: "Sam Altman",
src: "https://avatars.spaceui.one/v1?name=samaltman&variant=invader",
fallback: "SA",
online: false,
},
{
id: 10,
name: "Andrej Karpathy",
src: "https://avatars.spaceui.one/v1?name=andrejkarpathy&variant=kendo",
fallback: "AK",
online: false,
},
];
export default function Demo() {
return <UserPresenceAvatar users={USERS} />;
}
export { Demo as UserPresenceAvatarDemo };