Spaces:
Running
Running
File size: 3,697 Bytes
eee3ce2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | tsx
import React from 'react'
import { Sparkles, Zap, Brain } from 'lucide-react'
/**
* Loading component with animated optimization process
*/
export function LoadingState() {
return (
<div className="card p-8">
<div className="text-center space-y-6">
{/* Animated Icon */}
<div className="relative mx-auto w-16 h-16">
<div className="absolute inset-0 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-full animate-pulse"></div>
<div className="absolute inset-2 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center">
<Sparkles className="w-8 h-8 text-primary-600 dark:text-primary-400 animate-spin" />
</div>
</div>
{/* Loading Text */}
<div className="space-y-2">
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
Prompt wird optimiert...
</h3>
<p className="text-gray-600 dark:text-gray-400">
Unser KI-System analysiert und verbessert deinen Prompt
</p>
</div>
{/* Progress Steps */}
<div className="space-y-4 max-w-md mx-auto">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
<svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
</div>
<span className="text-sm text-gray-700 dark:text-gray-300">Prompt analysieren</span>
</div>
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center animate-pulse">
<Brain className="w-3 h-3 text-white" />
</div>
<span className="text-sm text-gray-700 dark:text-gray-300">KI-Strategien anwenden</span>
</div>
<div className="w-2 h-2 bg-primary-500 rounded-full animate-pulse"></div>
</div>
<div className="flex items-center justify-between opacity-50">
<div className="flex items-center space-x-3">
<div className="w-6 h-6 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
<span className="text-sm text-gray-500 dark:text-gray-400">Optimierung abschließen</span>
</div>
<div className="w-2 h-2 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
</div>
</div>
{/* Estimated Time */}
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
<div className="flex items-center justify-center space-x-2 text-blue-700 dark:text-blue-300">
<Zap className="w-4 h-4" />
<span className="text-sm font-medium">Geschätzte Zeit: 1-3 Sekunden</span>
</div>
</div>
{/* Tips */}
<div className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
<p>💡 Unsere Optimierung berücksichtigt:</p>
<p>• KI-spezifische Best Practices</p>
<p>• Struktur und Klarheit</p>
<p>• Effektivität und Spezifität</p>
</div>
</div>
</div>
)
}
</html> |