export default memo()

in infrastructure/load-balancing-blitz/frontend/components/AudioButton.tsx [25:80]
52 lines of code
6 McCabe index (conditional complexity)

export default memo(function AudioButton() {
  const [audioVolume, setAudioVolume] = useState(0);

  const handleVolumeClick = () => {
    setAudioVolume(toggleAudioVolume());
  }

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      switch (event.code) {
        case 'KeyG':
        case 'KeyM':
        case 'KeyV':
          handleVolumeClick();
          return;
      }
    };
    window.addEventListener("keydown", handleKeyDown);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  return (
    <div className='flex absolute min-h-screen right-0'>
      <div className='m-auto'>
        {audioVolume === 0 ? (
          <button
            onClick={handleVolumeClick}
            className="group rounded-lg border px-5 py-4 transition-colors hover:bg-gray-100"
          >
            <h2 className={`mb-3 text-5xl`}>
              🔊
            </h2>
            <p className={`mb-3`}>
              Press M for Music
            </p>
          </button>
        ) : (
          <button
            onClick={handleVolumeClick}
            className="group rounded-lg border px-5 py-4 transition-colors hover:bg-gray-100"
          >
            <h2 className={`mb-3 text-5xl`}>
              🔈
            </h2>
            <p className={`mb-3`}>
              Press M to Mute
            </p>
          </button>
        )}
      </div>
    </div>
  );
});