LIVE の札LiveBadgeExperimental

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

// ⭐ live かどうかは呼び出し側が決めます。札は時計も持たず、比較もしません。
export function WaitTime({ value, connected, receivedAt }) {
  return (
    <Statistic
      label={
        <span className="inline-flex items-center gap-2">
          待ち時間
          {/* 実時間から外れたら、札の代わりに「いつの値か」を出します */}
          <LiveBadge live={connected} detached={`${receivedAt} 時点`}>
            LIVE
          </LiveBadge>
        </span>
      }
      value={value}
    />
  );
}

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

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