File size: 2,600 Bytes
921d377 | 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 | import React from 'react';
import { Film, Plus, Loader2, Sparkles } from 'lucide-react';
// -----------------------------------------------------------------------------
// Component
// -----------------------------------------------------------------------------
/**
* Empty state component for Story Mode Studio when there are no scenes.
* Styled like Imagine's empty gallery state.
*/
export function StudioEmptyState({ title = 'No scenes yet', description = 'Generate your first scene to start bringing your story to life.', isGenerating = false, generatingLabel = 'Generating first scene...', onGenerateFirstScene, buttonLabel = 'Generate First Scene', className = '', }) {
return (<div className={`flex-1 flex items-center justify-center ${className}`}>
<div className="text-center p-8 max-w-md">
{isGenerating ? (
/* Generating state */
<div className="flex flex-col items-center">
<div className="relative mb-6">
<div className="w-20 h-20 rounded-2xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center">
<Loader2 size={32} className="text-purple-400 animate-spin"/>
</div>
<div className="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-purple-500/20 flex items-center justify-center animate-pulse">
<Sparkles size={12} className="text-purple-400"/>
</div>
</div>
<h3 className="text-lg font-semibold text-white mb-2">{generatingLabel}</h3>
<p className="text-sm text-white/50">
The AI is crafting your scene. This may take a moment...
</p>
</div>) : (
/* Default empty state */
<div className="flex flex-col items-center">
<div className="w-20 h-20 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mb-6">
<Film size={32} className="text-white/30"/>
</div>
<h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
<p className="text-sm text-white/50 mb-6">{description}</p>
{onGenerateFirstScene && (<button onClick={onGenerateFirstScene} className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 hover:opacity-90 rounded-full text-white font-semibold transition-all hover:scale-[1.02] active:scale-[0.98]" type="button">
<Plus size={18}/>
{buttonLabel}
</button>)}
</div>)}
</div>
</div>);
}
export default StudioEmptyState;
|