54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { Rocket } from "lucide-react";
|
|
|
|
interface GenerateActionBarProps {
|
|
isGenerating: boolean;
|
|
progress: number;
|
|
disabled: boolean;
|
|
onGenerate: () => void;
|
|
}
|
|
|
|
export function GenerateActionBar({
|
|
isGenerating,
|
|
progress,
|
|
disabled,
|
|
onGenerate,
|
|
}: GenerateActionBarProps) {
|
|
return (
|
|
<button
|
|
onClick={onGenerate}
|
|
disabled={disabled}
|
|
className={`w-full py-4 rounded-xl font-bold text-lg transition-all ${disabled
|
|
? "bg-gray-600 cursor-not-allowed text-gray-400"
|
|
: "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white shadow-lg hover:shadow-purple-500/25"
|
|
}`}
|
|
>
|
|
{isGenerating ? (
|
|
<span className="flex items-center justify-center gap-3">
|
|
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
/>
|
|
</svg>
|
|
生成中... {progress}%
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<Rocket className="h-5 w-5" />
|
|
生成视频
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|