Flow State Radio - designed to help you focus and flow

FlowStateRadio.tsx

export default function FlowStateRadio() {
  const [selectedButton, setSelectedButton] = useState(0);
  const { data: user, isLoading } = useUserData();

  const buttons: ButtonConfig[] = [
    { type: 'music', label: 'MUSIC' },
    { type: 'ambient', label: 'MUSIC + AMBIENT BREAKS' },
    { type: 'talk', label: 'MUSIC + TALK BREAKS', requiresAuth: true },
  ];

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      switch (e.key) {
        case 'ArrowDown':
          setSelectedButton((prev) => Math.min(prev + 1, buttons.length - 1));
          break;
        case 'ArrowUp':
          setSelectedButton((prev) => Math.max(prev - 1, 0));
          break;
        case 'Enter':
          const buttons = document.querySelectorAll('.stream-button');
          (buttons[selectedButton] as HTMLButtonElement)?.click();
          break;
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [selectedButton, buttons.length]);

  return (
    <main className="flex items-center justify-center p-2 h-full pb-20">
      <div className="w-full max-w-sm border-white/10 rounded-lg p-2">
        <div className="space-y-6">
          <p className="text-8xl font-medium">FOCUS</p>
          {buttons.map((button, index) => (
            <div 
              key={button.type} 
              className="relative"
              onClick={() => setSelectedButton(index)}
              onMouseEnter={() => setSelectedButton(index)}
            >
              {selectedButton === index && (
                <span className="absolute -left-6 top-1/2 -translate-y-1/2 text-2xl">➜</span>
              )}
              <StreamButton 
                type={button.type}
                label={button.label}
                requiresAuth={button.requiresAuth}
                isAuthenticated={user != null}
                className="stream-button"
                selected={selectedButton === index}
              />
            </div>
          ))}
          <Footer />
        </div>
      </div>
    </main>
  );
}