src/components/PromptEnhancer.tsx

tsx
import React from 'react'
import { PromptInput } from './PromptInput'
import { ModelSelector } from './ModelSelector'
import { OptimizationResult } from './OptimizationResult'
import { ComparisonView } from './ComparisonView'
import { LoadingState } from './LoadingState'
import { ErrorMessage } from './ErrorMessage'
import { useAppStore } from '@/store/useAppStore'

/**
 * Main component for the Prompt Enhancement application
 * Orchestrates the different components and handles the main workflow
 */
export function PromptEnhancer() {
  const {
    prompt,
    selectedModel,
    isOptimizing,
    result,
    error,
    showComparison,
    canOptimize,
    optimizePrompt,
    setShowComparison
  } = useAppStore()

  return (
    <div className="max-w-6xl mx-auto space-y-8">
      {/* Header Section */}
      <div className="text-center">
        <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
          KI-Prompt Optimierung
        </h2>
        <p className="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
          Transformiere deine Prompts in präzise, effektive Anweisungen für maximale KI-Performance. 
          Wähle deine Ziel-KI und lass unser System die Optimierung übernehmen.
        </p>
      </div>

      {/* Main Input Section */}
      <div className="grid lg:grid-cols-2 gap-8">
        {/* Input Column */}
        <div className="space-y-6">
          <div className="card p-6">
            <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
              Dein Prompt
            </h3>
            <PromptInput />
          </div>

          <div className="card p-6">
            <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
              Ziel-KI auswählen
            </h3>
            <ModelSelector />
          </div>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-4">
            <button
              onClick={optimizePrompt}
              disabled={!canOptimize()}
              className="flex-1 btn-primary text-lg py-3 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isOptimizing ? (
                <>
                  <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
                  Optimiere...
                </>
              ) : (
                'Prompt optimieren'
              )}
            </button>
            
            {result && (
              <button
                onClick={() => setShowComparison(!showComparison)}
                className="btn-secondary px-6"
              >
                {showComparison ? 'Einzelansicht' : 'Vergleich anzeigen'}
              </button>
            )}
          </div>
        </div>

        {/* Output Column */}
        <div className="space-y-6">
          {error && <ErrorMessage />}
          
          {isOptimizing && <LoadingState />}
          
          {result && !showComparison && <OptimizationResult />}
          
          {result && showComparison && <ComparisonView />}
          
          {!result && !isOptimizing && !error && (
            <div className="card p-8 text-center">
              <div className="w-16 h-16 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                Bereit zur Optimierung
              </h3>
              <p className="text-gray-600 dark:text-gray-400">
                Gib deinen Prompt ein und wähle eine Ziel-KI aus, um zu beginnen.
              </p>
            </div>
          )}
        </div>
      </div>

      {/* Features Section */}
      <div className="card p-8 mt-12">
        <h3 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 text-center">
          Warum Prompt Enhancer verwenden?
        </h3>
        
        <div className="grid md:grid-cols-3 gap-8">
          <div className="text-center">
            <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mx-auto mb-4">
              <svg className="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
            </div>
            <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
              KI-spezifische Optimierung
            </h4>
            <p className="text-gray-600 dark:text-gray-400">
              Jede KI-Plattform hat einzigartige Anforderungen. Unsere Engine berücksichtigt das.
            </p>
          </div>
          
          <div className="text-center">
            <div className="w-12 h-12 bg-secondary-100 dark:bg-secondary-900 rounded-lg flex items-center justify-center mx-auto mb-4">
              <svg className="w-6 h-6 text-secondary-600 dark:text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
            </div>
            <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
              Messbare Verbesserungen
            </h4>
            <p className="text-gray-600 dark:text-gray-400">
              Strukturierte, spezifischere und ausführbarere Prompts für bessere KI-Ergebnisse.
            </p>
          </div>
          
          <div className="text-center">
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mx-auto mb-4">
              <svg className="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
              Produktionsreif
            </h4>
            <p className="text-gray-600 dark:text-gray-400">
              Robuste Fehlerbehandlung, Optimierung und Benutzerfreundlichkeit in jedem Detail.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

</html>