Компоненты
LiveIndicator
Состояние живого соединения точкой и подписью.
Состояние живого соединения точкой и подписью. Обычно стоит рядом с заголовком экрана, который обновляется сам.
Пример
обновлено в 09:05подключаемся…нет связи — обновления приостановлены
import { useEventStream } from "@toimetdev/pathlogs-hooks";
import { LiveIndicator } from "@toimetdev/pathlogs-core";
const { status, updatedAt } = useEventStream(`/api/projects/${id}/stream`, {
events: ["change"],
onEvent: () => router.refresh(),
});
<LiveIndicator
status={status}
updatedAt={updatedAt}
locale="ru-RU"
labels={{
updated: "обновлено в {time}",
connecting: "подключаемся…",
offline: "нет связи — обновления приостановлены",
}}
/>Не только цвет
Поэтому offline подписывается не просто «нет связи», а «обновления приостановлены»: пользователю важно понимать последствие, а не диагноз.
Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
status* | "connecting" | "live" | "offline" | — | Состояние соединения. Приходит из useEventStream. |
updatedAt | Date | null | — | Когда в последний раз применили изменение. |
locale | string | — | Локаль для времени. По умолчанию — локаль браузера. |
labels | { live?, connecting?, offline?, updated?, tipLive?, tipOffline? } | — | Подписи. В updated подставляется {time}. |
status*"connecting" | "live" | "offline"Состояние соединения. Приходит из useEventStream.
updatedAtDate | nullКогда в последний раз применили изменение.
localestringЛокаль для времени. По умолчанию — локаль браузера.
labels{ live?, connecting?, offline?, updated?, tipLive?, tipOffline? }Подписи. В updated подставляется {time}.
labels={{ updated: "обновлено в {time}" }}
// → «обновлено в 14:32»