31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
import { WorkflowStep } from "@/interfaces/approval.workflow";
|
|
import clsx from "clsx";
|
|
import { IoCheckmarkDoneSharp, IoCheckmarkSharp } from "react-icons/io5";
|
|
import { RxCross2 } from "react-icons/rx";
|
|
|
|
type Props = Pick<WorkflowStep, 'stepNumber' | 'completed' | 'finalStep' | 'selected' | 'rejected'>
|
|
|
|
export default function WorkflowStepNumber({ stepNumber, selected = false, completed, rejected, finalStep }: Props) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'flex items-center justify-center min-w-11 min-h-11 rounded-full',
|
|
{
|
|
'bg-mti-red-dark text-mti-red-ultralight': rejected,
|
|
'bg-mti-purple-dark text-mti-purple-ultralight': selected,
|
|
'bg-mti-purple-ultralight text-gray-500': !selected,
|
|
}
|
|
)}
|
|
>
|
|
{rejected ? (
|
|
<RxCross2 className="text-xl font-bold" size={25}/>
|
|
) : completed && finalStep ? (
|
|
<IoCheckmarkDoneSharp className="text-xl font-bold" size={25} />
|
|
) : completed && !finalStep ? (
|
|
<IoCheckmarkSharp className="text-xl font-bold" size={25} />
|
|
) : (
|
|
<span className="text-lg font-semibold">{stepNumber}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}; |