Function OBRow

src/components/OrderBook.tsx:298–315

({ level, side, maxCum }: { level: OrderBookLevel; side: "bid" | "ask"; maxCum: number })

}

function OBRow({ level, side, maxCum }: { level: OrderBookLevel; side: "bid" | "ask"; maxCum: number }) {
  const pct = maxCum > 0 ? (level.cumSize / maxCum) * 100 : 0;
  const bid = side === "bid";
  return (
    <div className="ob-row flex items-center text-[10px] tabular-nums px-2 relative" style={{ height: 18 }}>
      <div className="absolute inset-y-0 right-0" style={{ width: `${pct}%`, background: bid ? BID_BAR : ASK_BAR }} />
      <span className="w-[52px] font-medium relative z-[1]" style={{ color: bid ? BID_COLOR : ASK_COLOR }}>
        {level.price.toFixed(3)}
      </span>
      <span className="w-[52px] text-right text-[var(--text-secondary)] relative z-[1]">
        {fmtK(level.size)}
      </span>
      <span className="flex-1 text-right text-[var(--text-dim)] text-[10px] relative z-[1]">
        {fmtK(level.cumSize)}
      </span>
    </div>
  );
}

function fmtK(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;