35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { UsersIcon } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { useVisitorPresence } from "@/hooks/use-presence";
|
|
|
|
export function VisitorPresence({ guideId }: { guideId?: string }) {
|
|
const counts = useVisitorPresence(guideId ?? null);
|
|
return (
|
|
<div className="flex items-center gap-1" aria-live="polite">
|
|
<Badge
|
|
variant="secondary"
|
|
className="tabular-nums"
|
|
title="ผู้เข้าชมทั้งหมดที่กำลังออนไลน์"
|
|
aria-label={`ผู้เข้าชมทั้งหมดที่กำลังออนไลน์ ${counts?.global ?? "-"}`}
|
|
>
|
|
<UsersIcon data-icon="inline-start" />
|
|
<span className="hidden sm:inline">ทั้งหมด</span> {counts?.global ?? "-"}
|
|
</Badge>
|
|
{guideId ? (
|
|
<Badge
|
|
variant="outline"
|
|
className="tabular-nums"
|
|
title="ผู้เข้าชม Guide นี้ที่กำลังออนไลน์"
|
|
aria-label={`ผู้เข้าชม Guide นี้ที่กำลังออนไลน์ ${counts?.guide ?? "-"}`}
|
|
>
|
|
<span className="hidden sm:inline">ไกด์นี้</span>
|
|
<span aria-hidden="true" className="sm:hidden">G</span> {counts?.guide ?? "-"}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|