forked from cerc-io/snowballtools-base
84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
|
|
import { cn } from 'utils/classnames';
|
|
import {
|
|
CheckRoundFilledIcon,
|
|
ClockOutlineIcon,
|
|
LoaderIcon,
|
|
} from 'components/shared/CustomIcon';
|
|
|
|
enum DeployStatus {
|
|
PROCESSING = 'progress',
|
|
COMPLETE = 'complete',
|
|
NOT_STARTED = 'notStarted',
|
|
ERROR = 'error',
|
|
}
|
|
|
|
interface DeployStepsProps {
|
|
status: DeployStatus;
|
|
title: string;
|
|
step?: string;
|
|
startTime?: string;
|
|
processTime?: string;
|
|
}
|
|
|
|
const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
|
|
return (
|
|
<div className="border-b border-border-separator">
|
|
<button
|
|
className={cn('flex justify-between w-full py-5 gap-2', 'cursor-auto')}
|
|
>
|
|
<div className={cn('grow flex items-center gap-3')}>
|
|
{/* Icon */}
|
|
<div className="w-6 h-6 grid place-content-center">
|
|
{status === DeployStatus.NOT_STARTED && (
|
|
<div className="grid place-content-center w-6 h-6 rounded-[48px] bg-base-bg-emphasized font-mono text-xs">
|
|
{step}
|
|
</div>
|
|
)}
|
|
{status === DeployStatus.PROCESSING && (
|
|
<LoaderIcon className="animate-spin text-elements-link dark:text-foreground" />
|
|
)}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<span
|
|
className={cn(
|
|
'text-left text-sm md:text-base',
|
|
status === DeployStatus.PROCESSING &&
|
|
'text-elements-link dark:text-foreground',
|
|
)}
|
|
>
|
|
{title}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Timer */}
|
|
{status === DeployStatus.PROCESSING && (
|
|
<div className="flex items-center gap-1.5">
|
|
<ClockOutlineIcon
|
|
size={16}
|
|
className="text-elements-low-em dark:text-foreground-secondary"
|
|
/>
|
|
<Stopwatch
|
|
offsetTimestamp={setStopWatchOffset(startTime!)}
|
|
isPaused={false}
|
|
/>
|
|
</div>
|
|
)}
|
|
{status === DeployStatus.COMPLETE && (
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="w-4.5 h-4.5 grid place-content-center">
|
|
<CheckRoundFilledIcon
|
|
className="text-elements-success"
|
|
size={15}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { DeployStep, DeployStatus };
|