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

100% Statements 26/26
100% Branches 5/5
100% Functions 2/2
100% Lines 26/26

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

    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x

    6x
    6x
    6x
    6x
    42x
    42x
    42x
    42x

    42x
    6x
    36x
    42x

    42x
    42x
    6x
    6x

    6x
     import React from 'react';
    import { getSportDisplayName } from '../../utils/format';

    interface SportFilterProps {
      value: string;
      onChange: (sport: string) => void;
    }

    const SPORTS = [
      { key: 'all', label: 'All Sports' },
      { key: 'basketball_nba', label: 'NBA' },
      { key: 'americanfootball_nfl', label: 'NFL' },
      { key: 'icehockey_nhl', label: 'NHL' },
      { key: 'baseball_mlb', label: 'MLB' },
      { key: 'americanfootball_ncaaf', label: 'NCAAF' },
      { key: 'basketball_ncaab', label: 'NCAAB' }
    ];

    export default function SportFilter({ value, onChange }: SportFilterProps) {
      return (
        <div className="flex flex-wrap gap-2">
          {SPORTS.map((sport) => (
            <button
              key={sport.key}
              onClick={() => onChange(sport.key)}
              className={`
                px-4 py-2 rounded-lg font-medium text-sm transition-all
                ${
                  value === sport.key
                    ? 'bg-brand-600 text-white shadow-md'
                    : 'bg-gray-100 dark:bg-surface-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-surface-600'
                }
              `}
            >
              {sport.label}
            </button>
          ))}
        </div>
      );
    }