You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
1.0 KiB
TypeScript
24 lines
1.0 KiB
TypeScript
// frontend/components/connectors/ConnectStateBadge.tsx — 연결 상태 배지 (§5.3 색표)
|
|
import type { ConnState } from "@/lib/types";
|
|
|
|
// state → 배지 라벨 + 점 색 클래스 (dash.css 액센트)
|
|
// connected 는 row 의 last 텍스트("방금 동기화"/"오늘 09:12"/"1분 전")를 라벨로 쓴다.
|
|
const MAP: Record<ConnState, { label: string; dotClass: string }> = {
|
|
connected: { label: "방금 동기화", dotClass: "green" },
|
|
syncing: { label: "동기화 중…", dotClass: "blue" },
|
|
disconnected: { label: "연결 안 됨", dotClass: "faint" },
|
|
error: { label: "동기화 실패 · 다시 시도", dotClass: "coral" },
|
|
token_expired: { label: "권한 만료 · 다시 연결", dotClass: "amber" },
|
|
};
|
|
|
|
export function ConnectStateBadge({ state, last }: { state: ConnState; last?: string }) {
|
|
const m = MAP[state];
|
|
const label = state === "connected" && last ? last : m.label;
|
|
return (
|
|
<span className={"cs-badge cs-" + state}>
|
|
<i className={"dot dot-" + m.dotClass} />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|