bun add @iconical/presencekit

"use client";

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

export default function DiscordPresence() {
  return (
    <LivePresenceCard
      userId="123456789012345678"
      theme={{ accent: "#ac1c23" }}
      loadingFallback={<p>Connecting to PresenceKit…</p>}
      errorFallback={<p>Presence is currently unavailable.</p>}
    />
  );
}

import DiscordPresence from "@/components/discord-presence";

export default function Page() {
  return <main><DiscordPresence /></main>;
}

"use client";
import { usePresence } from "@iconical/presencekit/react";
import { ActivityArtwork } from "@iconical/presencekit/react-ui";

export function MyActivities({ userId }: { userId: string }) {
  const { data, loading, error } = usePresence({ userId });
  if (loading) return <p>Loading…</p>;
  if (error || !data?.presence) return <p>No activity.</p>;

  return <div>{data.presence.activities.map((activity, index) => (
    <div key={activity.id ?? `${activity.name}-${index}`}>
      <ActivityArtwork activity={activity} preferred="cover" size={48} />
      <span>{activity.name}</span>
    </div>
  ))}</div>;
}