68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import { cn } from '@/lib/utils';
|
||
import type { TranslationKey } from '@/lib/i18n';
|
||
|
||
interface ProgressData {
|
||
progress: number;
|
||
message: string;
|
||
}
|
||
|
||
interface DeployProgressProps {
|
||
t: (key: TranslationKey) => string;
|
||
stackName: string;
|
||
deploymentUrl: string;
|
||
progressData: ProgressData;
|
||
logs: string[];
|
||
}
|
||
|
||
export function DeployProgress({ t, stackName, deploymentUrl, progressData, logs }: DeployProgressProps) {
|
||
return (
|
||
<div className="backdrop-blur-md bg-black/20 rounded-2xl p-10 border border-white/10 shadow-2xl animate-fadeIn">
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h2 className="text-2xl font-bold text-white">{t('deploying')}</h2>
|
||
<div className="w-6 h-6 border-3 border-white/10 border-t-white rounded-full animate-spin" />
|
||
</div>
|
||
|
||
<div className="bg-white/5 p-4 rounded-xl mb-6 border border-white/10">
|
||
<p className="text-[0.95rem] mb-2 text-gray-300">
|
||
{t('stack')}: <strong className="text-white">{stackName}</strong>
|
||
</p>
|
||
<p className="text-[0.95rem] text-gray-300">
|
||
URL: <strong className="text-white">{deploymentUrl}</strong>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4 mb-8">
|
||
<div className="flex-1 h-1 bg-white/10 rounded overflow-hidden">
|
||
<div
|
||
className="h-full bg-white transition-all duration-300 rounded"
|
||
style={{ width: `${progressData.progress}%` }}
|
||
/>
|
||
</div>
|
||
<span className="font-medium text-gray-400 min-w-[3rem] text-right text-sm">
|
||
{progressData.progress}%
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
<div className={cn(
|
||
'flex items-center gap-4 p-3 rounded-lg',
|
||
'bg-white/5 border-l-[3px] border-white'
|
||
)}>
|
||
<span className="text-2xl">⚙️</span>
|
||
<span className="flex-1 text-[0.95rem] text-gray-300">{progressData.message}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{logs.length > 0 && (
|
||
<div className="mt-6 p-4 bg-black/50 border border-white/10 rounded-lg font-mono text-sm text-gray-400 max-h-[200px] overflow-y-auto">
|
||
{logs.map((log, i) => (
|
||
<div key={i} className="animate-fadeInUp">
|
||
{log}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|