Files
k-tv/k-tv-frontend/app/(main)/library/components/sync-status-bar.tsx

31 lines
999 B
TypeScript

"use client";
import { useLibrarySyncStatus } from "@/hooks/use-library-sync";
export function SyncStatusBar() {
const { data: statuses } = useLibrarySyncStatus();
if (!statuses || statuses.length === 0) return null;
return (
<div className="border-b border-zinc-800 bg-zinc-900 px-6 py-1.5">
<div className="flex flex-wrap gap-4">
{statuses.map(s => (
<span key={s.id} className="text-xs text-zinc-500">
{s.provider_id}:{" "}
{s.status === "running" ? (
<span className="text-yellow-400">syncing</span>
) : s.status === "error" ? (
<span className="text-red-400">error</span>
) : (
<span className="text-zinc-400">
{s.items_found.toLocaleString()} items
{s.finished_at ? ` · synced ${new Date(s.finished_at).toLocaleTimeString()}` : ""}
</span>
)}
</span>
))}
</div>
</div>
);
}