cal.pub0.org/packages/ui/components/form/step/FormStep.tsx

36 lines
884 B
TypeScript

import React from "react";
import classNames from "@calcom/lib/classNames";
type Props = {
steps: number;
currentStep: number;
};
// It might be worth passing this label string from outside the component so we can translate it?
function FormStep({ currentStep, steps }: Props) {
return (
<div className="w-full">
<p className="text-xs font-medium text-gray-400">
Step {currentStep} of {steps}
</p>
<div className="flex flex-nowrap space-x-1">
{[...Array(steps)].map((_, j) => {
console.log({ j, currentStep });
return (
<div
className={classNames(
"h-1 w-full rounded-sm",
currentStep - 1 >= j ? "bg-black" : "bg-gray-400"
)}
key={j}
/>
);
})}
</div>
</div>
);
}
export default FormStep;