# All files / src/components/odds OddsCell.tsx

90.47% Statements 38/42
100% Branches 15/15
50% Functions 1/2
90.47% Lines 38/42

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    1x

    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    2x
    8x

    10x
    10x
    10x
    10x
    10x

    10x
    10x
    1x
    9x
    10x
    10x

    10x
    10x
    2x
    2x
    2x

    10x
    10x
    10x
    10x
    10x

    10x

    1x

     import React from 'react';
    import { formatOdds, formatSpread, formatTotal } from '../../utils/format';

    interface OddsCellProps {
      odds: number;
      line?: number;
      prefix?: string;
      selected?: boolean;
      isBest?: boolean;
      onClick?: () => void;
      disabled?: boolean;
      useDecimalOdds?: boolean;
    }

    export default function OddsCell({
      odds,
      line,
      prefix,
      selected = false,
      isBest = false,
      onClick,
      disabled = false,
      useDecimalOdds = false
    }: OddsCellProps) {
      const formattedOdds = formatOdds(odds, useDecimalOdds);
      const formattedLine = line !== undefined ? (
        prefix ? `${prefix} ${formatTotal(line)}` : formatSpread(line)
      ) : null;

      return (
        <button
          onClick={onClick}
          disabled={disabled}
          className={`
            px-3 py-2 rounded-md text-sm font-medium transition-all
            min-w-[80px] text-center
            ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
            ${selected
              ? 'bg-blue-100 border-2 border-blue-600 text-blue-900'
              : 'bg-white border border-gray-300 hover:border-gray-400 hover:shadow-md'
            }
            ${isBest && !selected ? 'text-green-600 font-bold' : ''}
          `}
        >
          <div className="flex flex-col gap-0.5">
            {formattedLine && (
              <div className="text-xs text-gray-600 font-semibold">
                {formattedLine}
              </div>
            )}
            <div className={selected ? 'text-blue-900' : ''}>
              {formattedOdds}
            </div>
          </div>
        </button>
      );
    }

    /**
     * Empty cell for games without odds
     */
    export function EmptyOddsCell() {
      return (
        <div className="px-3 py-2 min-w-[80px] text-center text-gray-400 text-sm">
          —
        </div>
      );
    }