LIVE の札LiveBadgeExperimental

import { LiveBadge, Statistic } from "@gunjo/ui";

// live かどうかは呼び出し側が決めます。札は時計も持たず、比較もしません。
const CONNECTED = true;
const RECEIVED_AT = "09:40";

export function WaitTime() {
  return (
    <Statistic
      label={
        <span className="inline-flex items-center gap-2">
          待ち時間
          {/* 実時間から外れたら、札の代わりに「いつの値か」を出します */}
          <LiveBadge live={CONNECTED} detached={`${RECEIVED_AT} 時点`}>
            LIVE
          </LiveBadge>
        </span>
      }
      value="12分"
    />
  );
}

// detached を渡さなければ、外れているとき札そのものが消えます（推測しません）
export function QuietWhenUnknown() {
  return <LiveBadge live={false} />;
}

// 変化そのものが知らせたいことなら、読み上げ領域は呼び出し側で付けます
export function Announced() {
  return <LiveBadge live={CONNECTED} detached={RECEIVED_AT} role="status" />;
}