30 lines
1.0 KiB
TypeScript
30 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { UsersIcon } from "lucide-react";
|
|
|
|
import { AdminUnreadBadge } from "@/components/comments/admin-unread-comments";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { useAdminPresence } from "@/hooks/use-presence";
|
|
|
|
export function EditorPresence({ guideId, section }: { guideId: string; section: string }) {
|
|
const presence = useAdminPresence(guideId, section);
|
|
const editors = presence?.editorsByGuide[guideId] ?? [];
|
|
return (
|
|
<div className="flex flex-col items-start gap-1">
|
|
<div className="flex flex-wrap items-center gap-1" aria-live="polite">
|
|
<Badge variant="secondary">
|
|
<UsersIcon data-icon="inline-start" />
|
|
Editing {editors.length || (presence ? 0 : "")}
|
|
</Badge>
|
|
{editors.map((editor) => (
|
|
<Badge key={editor.userId} variant="outline">
|
|
{editor.name}
|
|
{editor.sections.length ? ` - ${editor.sections.join(", ")}` : ""}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<AdminUnreadBadge target={`guide:${guideId}`} />
|
|
</div>
|
|
);
|
|
}
|