New design v0.2

New design and framework

client/src/components/deploy/DeployProgress.tsx

@@ -0,0 +1,67 @@
+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>
+  );
+}