Level Filter component with dynamic colours (Inertia JS)

LevelsFilter.js

import React from 'react'

const LevelsFilter = ({ levels, updateQuery, queryParams }) => {
  
  function levelColor(color) {
    return 'bg-' + color + '-500';
  }

  return (
    <div className="bg-white shadow-md p-6 mb-4 dark:text-white w-full" id="levels">
      <div className="mb-2">
        <div className="flex">
          <h1 className="flex mb-2 text-gray-600">Difficulty:</h1>
        </div>
        <div className="flex flex-wrap">
          {levels.map(level => (
            <button
              key={level.id}
              onClick={() => { updateQuery('level', level.name) }}
              data-id={level.id}
              className={`flex pointer px-3 py-2 text-sm mr-2 mb-2 text-center justify-center hover:bg-opacity-75 font-bold ${levelColor(level.color)} ${queryParams.level == level.name ? 'bg-opacity-100' : 'bg-opacity-50'}`}
            >
              {level.name}
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

export default LevelsFilter;