74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
|
|
import { Separator } from "../ui/separator";
|
|
|
|
type DeployProgressProps = {
|
|
phase?: "check" | "apply" | "deploy";
|
|
phaseSuccess?: boolean;
|
|
};
|
|
|
|
const DeployProgress = ({ phase, phaseSuccess }: DeployProgressProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
let step = 0;
|
|
|
|
if (phase === "check") {
|
|
step = 1
|
|
} else if (phase === "apply") {
|
|
step = 2
|
|
} else if (phase === "deploy") {
|
|
step = 3
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
<div className={
|
|
cn(
|
|
"text-xs text-nowrap",
|
|
step === 1 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
|
|
step > 1 ? "text-green-600" : "",
|
|
)
|
|
}>
|
|
{t('deploy.progress.check')}
|
|
</div>
|
|
<Separator className={
|
|
cn(
|
|
"h-1 grow max-w-[60px]",
|
|
step > 1 ? "bg-green-600" : "",
|
|
)
|
|
} />
|
|
<div className={
|
|
cn(
|
|
"text-xs text-nowrap",
|
|
step < 2 ? "text-muted-foreground" : "",
|
|
step === 2 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
|
|
step > 2 ? "text-green-600" : "",
|
|
)
|
|
}>
|
|
{t('deploy.progress.apply')}
|
|
</div>
|
|
<Separator className={
|
|
cn(
|
|
"h-1 grow max-w-[60px]",
|
|
step > 2 ? "bg-green-600" : "",
|
|
)
|
|
} />
|
|
<div className={
|
|
cn(
|
|
"text-xs text-nowrap",
|
|
step < 3 ? "text-muted-foreground" : "",
|
|
step === 3 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
|
|
step > 3 ? "text-green-600" : "",
|
|
)
|
|
}>
|
|
{t('deploy.progress.deploy')}
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export default DeployProgress;
|