Spaces:
Sleeping
Sleeping
File size: 2,452 Bytes
91d209c |
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 |
import { motion } from 'framer-motion';
import { useGeneration } from '@/context/GenerationContext';
import { XIcon, RefreshIcon, ArrowLeftIcon } from './Icons';
export const ErrorDisplay: React.FC = () => {
const { state, reset, setStep } = useGeneration();
const { error } = state;
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="min-h-[60vh] flex flex-col items-center justify-center p-8"
>
<div className="max-w-lg w-full text-center">
{/* Error Icon */}
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', duration: 0.5 }}
className="w-20 h-20 mx-auto rounded-full bg-red-500/20 flex items-center justify-center mb-6"
>
<XIcon size={40} className="text-red-400" />
</motion.div>
{/* Error Message */}
<h1 className="text-3xl font-display font-bold text-void-100 mb-4">
Generation Failed
</h1>
<div className="card bg-red-500/10 border-red-500/30 mb-8">
<p className="text-red-300 text-sm">
{error || 'An unexpected error occurred during video generation.'}
</p>
</div>
{/* Actions */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<button
onClick={() => setStep('configuring')}
className="btn-primary flex items-center gap-2"
>
<RefreshIcon size={20} />
Try Again
</button>
<button
onClick={reset}
className="btn-secondary flex items-center gap-2"
>
<ArrowLeftIcon size={20} />
Start Over
</button>
</div>
{/* Help Text */}
<div className="mt-8 p-4 bg-void-900/50 rounded-xl border border-void-700">
<h3 className="text-sm font-semibold text-void-300 mb-2">Troubleshooting Tips</h3>
<ul className="text-xs text-void-400 space-y-1 text-left">
<li>• Check that your API keys are properly configured</li>
<li>• Ensure your image is under 10MB and in JPG/PNG format</li>
<li>• Try a shorter script if timeouts occur</li>
<li>• Check the backend server logs for more details</li>
</ul>
</div>
</div>
</motion.div>
);
};
|