70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import type { DeployState } from '../../types/deployer';
|
|
import './DeployProgress.css';
|
|
|
|
interface DeployProgressProps {
|
|
state: DeployState;
|
|
message: string;
|
|
completed: number;
|
|
total: number;
|
|
percent: number;
|
|
}
|
|
|
|
const STATE_GRADIENT: Record<string, string> = {
|
|
compiling: 'linear-gradient(90deg, #3b82f6, #60a5fa)', // blue
|
|
transferring: 'linear-gradient(90deg, #f59e0b, #fbbf24)', // amber/yellow
|
|
flashing: 'linear-gradient(90deg, #22c55e, #4ade80)', // green
|
|
serial_bridge:'linear-gradient(90deg, #8b5cf6, #a78bfa)', // purple
|
|
success: 'linear-gradient(90deg, #22c55e, #4ade80)', // green
|
|
};
|
|
|
|
const STATE_SPINNER_COLOR: Record<string, string> = {
|
|
compiling: '#3b82f6',
|
|
transferring: '#f59e0b',
|
|
flashing: '#22c55e',
|
|
serial_bridge:'#8b5cf6',
|
|
};
|
|
|
|
const DEFAULT_GRADIENT = 'linear-gradient(90deg, #3b82f6, #22c55e)';
|
|
const DEFAULT_SPINNER_COLOR = '#3b82f6';
|
|
|
|
export const DeployProgress: React.FC<DeployProgressProps> = ({
|
|
state,
|
|
message,
|
|
completed,
|
|
total,
|
|
percent,
|
|
}) => {
|
|
const showBar = total > 0 && (state === 'transferring' || state === 'flashing' || state === 'serial_bridge');
|
|
const showSpinner = state === 'compiling' || state === 'pairing' || (state === 'transferring' && total === 0);
|
|
const barGradient = STATE_GRADIENT[state] ?? DEFAULT_GRADIENT;
|
|
const spinnerColor = STATE_SPINNER_COLOR[state] ?? DEFAULT_SPINNER_COLOR;
|
|
|
|
return (
|
|
<div className="deploy-progress">
|
|
<div className="deploy-progress-header">
|
|
<span className="deploy-progress-message">{message}</span>
|
|
{showBar && (
|
|
<span className="deploy-progress-counter">
|
|
Chunk {completed}/{total} ({percent}%)
|
|
</span>
|
|
)}
|
|
</div>
|
|
{showBar && (
|
|
<div className="deploy-progress-bar-container">
|
|
<div
|
|
className="deploy-progress-bar-fill"
|
|
style={{ width: `${percent}%`, background: barGradient }}
|
|
/>
|
|
</div>
|
|
)}
|
|
{showSpinner && (
|
|
<div
|
|
className="deploy-progress-spinner"
|
|
style={{ borderTopColor: spinnerColor }}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|