mirror of https://github.com/jetkvm/kvm.git
75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import { CheckIcon } from "@heroicons/react/16/solid";
|
|
|
|
import { cva, cx } from "@/cva.config";
|
|
import Card from "@/components/Card";
|
|
|
|
interface Props {
|
|
nSteps: number;
|
|
currStepIdx: number;
|
|
size?: keyof typeof sizes;
|
|
}
|
|
|
|
const sizes = {
|
|
SM: "text-xs leading-[12px]",
|
|
MD: "text-sm leading-[14px]",
|
|
};
|
|
|
|
const variants = cva({
|
|
variants: {
|
|
size: sizes,
|
|
},
|
|
});
|
|
|
|
export default function StepCounter({ nSteps, currStepIdx, size = "MD" }: Props) {
|
|
const textStyle = variants({ size });
|
|
return (
|
|
<Card className="!inline-flex w-auto select-none items-center justify-center gap-x-2 rounded-lg p-1">
|
|
{[...Array(nSteps).keys()].map(i => {
|
|
if (i < currStepIdx) {
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"flex items-center justify-center rounded-full border border-blue-800 bg-blue-700 text-slate-600 dark:border-blue-300",
|
|
textStyle,
|
|
size === "SM" ? "h-5 w-5" : "h-6 w-6",
|
|
)}
|
|
key={`${i}-${currStepIdx}`}
|
|
>
|
|
<CheckIcon className="h-3.5 w-3.5 text-white" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (i === currStepIdx) {
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"rounded-md border border-blue-800 bg-blue-700 px-2 py-1 font-medium text-white shadow-sm dark:border-blue-300",
|
|
textStyle,
|
|
)}
|
|
key={`${i}-${currStepIdx}`}
|
|
>
|
|
Step {i + 1}
|
|
</div>
|
|
);
|
|
}
|
|
if (i > currStepIdx) {
|
|
return (
|
|
<Card
|
|
className={cx(
|
|
"flex items-center justify-center !rounded-full text-slate-600 dark:text-slate-400",
|
|
textStyle,
|
|
size === "SM" ? "h-5 w-5" : "h-6 w-6",
|
|
)}
|
|
key={`${i}-${currStepIdx}`}
|
|
>
|
|
{i + 1}
|
|
</Card>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</Card>
|
|
);
|
|
}
|