SyncStatusBadge
Estado de una integración con texto vivo: «Sincronizado hace 5 min».
Usar
import { SyncStatusBadge } from "@unozero-ai/ui/react";
<SyncStatusBadge></SyncStatusBadge>Estados
active con lastSyncAt dice cuándo fue la última sincronización; sin fecha, «Nunca sincronizado». consecutiveFailures mayor que cero gana a todo lo demás y cuenta los fallos seguidos aunque la integración siga activa. error e inactive cubren la cuenta rota y la desconectada. Cada estado lleva su icono y su palabra, así que se lee sin el color (la Regla del Tenant).
Texto relativo
De «Recién sincronizado» a minutos, horas y días. El texto se repinta solo justo cuando cambia el minuto (en el kit React, cada 30 segundos) y el título nativo da la fecha exacta al pasar el ratón. lastSyncAt acepta una fecha ISO, milisegundos o un Date. El texto lo pinta el elemento en el navegador, así que ya no rompe la hidratación aunque la página venga del servidor; si la fecha sale de la hora actual, calcúlala en el inicializador de useState, como aquí, para que el render siga siendo puro.
Lista de integraciones
Su sitio: en el slot trailing de cada integración del hotel, para ver de un vistazo cuál se quedó atrás. Los textos salen del kit y se cambian con setLabels (syncedMinutesAgo, syncFailedCount…).
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).