bun add @iconical/presencekit

import { usePresence } from "@iconical/presencekit/react";

export function OnlineStatus({ userId }: { userId: string }) {
  const { data, loading, error, refresh } = usePresence({
    userId,
    transport: "auto",
    intervalMs: 15_000,
  });

  if (loading) return <p>Connecting…</p>;
  if (error || !data) return <button onClick={refresh}>Retry</button>;

  return <p>{data.profile.displayName}: {data.presence?.status ?? "Pending"}</p>;
}

import { usePresences } from "@iconical/presencekit/react";

const ids = ["123456789012345678", "234567890123456789"];
export function GroupStatus() {
  const { data, loading, error } = usePresences({ userIds: ids });
  if (loading) return <p>Loading roster…</p>;
  if (error) return <p>Unable to load roster.</p>;

  return <ul>{Object.entries(data?.presences ?? {}).map(([id, person]) => (
    <li key={id}>{person.profile.displayName}: {person.presence?.status ?? "Pending"}</li>
  ))}</ul>;
}

import { LivePresenceCard, ConnectionStatus } from "@iconical/presencekit/react-ui";

export function StatusWidgets() {
  return <>
    <LivePresenceCard userId="123456789012345678" theme={{ accent: "#ac1c23" }} />
    <ConnectionStatus />
  </>;
}