work on non editable approval workflow steps view
This commit is contained in:
@@ -1,25 +1,25 @@
|
||||
import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
|
||||
import { WorkflowStep } from "@/interfaces/approval.workflow";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import { RiProgress5Line } from "react-icons/ri";
|
||||
import { IoCheckmarkDoneSharp, IoCheckmarkSharp } from "react-icons/io5";
|
||||
|
||||
interface Props {
|
||||
number: number;
|
||||
isSelected?: boolean;
|
||||
}
|
||||
|
||||
export default function WorkflowStepNumber({ number, isSelected = false }: Props) {
|
||||
export default function WorkflowStepNumber({ stepNumber, selected = false, completed, finalStep }: WorkflowStep) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'flex items-center justify-center w-11 h-11 rounded-full',
|
||||
{
|
||||
'bg-mti-purple text-mti-purple-ultralight': isSelected,
|
||||
'bg-mti-purple-ultralight text-gray-500': !isSelected,
|
||||
'bg-mti-purple-dark text-mti-purple-ultralight': selected,
|
||||
'bg-mti-purple-ultralight text-gray-500': !selected,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<span className="text-lg font-semibold">{number}</span>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user