App.tsx

import React, { useState } from 'react';
import { FEATURES, FeatureKey } from './constants';
import TextGeneration from './components/features/TextGeneration';
import StreamingText from './components/features/StreamingText';
import Chat from './components/features/Chat';
import Multimodal from './components/features/Multimodal';
import JsonOutput from './components/features/JsonOutput';
import FunctionCalling from './components/features/FunctionCalling';
import ImageGeneration from './components/features/ImageGeneration';
import GroundingSearch from './components/features/GroundingSearch';

const App: React.FC = () => {
  const [activeFeature, setActiveFeature] = useState<FeatureKey>('TEXT_GENERATION');

  const renderFeature = () => {
    switch (activeFeature) {
      case 'TEXT_GENERATION':
        return <TextGeneration />;
      case 'STREAMING_TEXT':
        return <StreamingText />;
      case 'CHAT':
        return <Chat />;
      case 'MULTIMODAL':
        return <Multimodal />;
      case 'JSON_OUTPUT':
        return <JsonOutput />;
      case 'FUNCTION_CALLING':
        return <FunctionCalling />;
      case 'IMAGE_GENERATION':
        return <ImageGeneration />;
      case 'GROUNDING_SEARCH':
        return <GroundingSearch />;
      default:
        return null;
    }
  };

  return (
    <div className="flex flex-col md:flex-row min-h-screen bg-slate-900 font-sans text-slate-100">
      <aside className="w-full md:w-80 bg-slate-800/50 flex flex-col shrink-0 border-b md:border-b-0 md:border-r border-white/5 backdrop-blur-sm">
        <div className="p-6 flex items-center border-b border-white/5">
          <h1 className="tracking-tight flex items-baseline gap-2 text-slate-200">
            <span className="text-3xl font-medium">module</span>
            <span className="text-xl font-bold">v0</span>
          </h1>
        </div>
        
        <nav className="p-4 space-y-1">
          {Object.entries(FEATURES).map(([key, { title }]) => (
            <button
              key={key}
              onClick={() => setActiveFeature(key as FeatureKey)}
              className={`w-full px-4 py-3 text-left rounded-lg transition-all duration-200 text-sm font-normal flex items-center ${
                activeFeature === key
                  ? 'bg-sky-600 text-white shadow-lg shadow-sky-900/20 ring-1 ring-white/10'
                  : 'text-slate-400 hover:bg-slate-700/50 hover:text-slate-200'
              }`}
            >
              {title}
            </button>
          ))}
        </nav>

        <div className="p-4 border-t border-white/5 bg-slate-900/20 mt-auto">
            <p className="text-xs text-slate-500 text-center">Powered by Google Gemini</p>
        </div>
      </aside>

      <main className="flex-1 flex flex-col min-w-0 bg-gradient-to-br from-slate-900 to-slate-800 pr-[10px] pl-5">
        <div className="flex-1 p-4 md:p-8">
            <div className="max-w-5xl mx-auto h-full flex flex-col">
                {renderFeature()}
            </div>
        </div>
      </main>
    </div>
  );
};

export default App;