Start implementing workflow step form behaviour

src/components/ApprovalWorkflows/WorkflowStepNumber.tsx

@@ -0,0 +1,25 @@
+import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import clsx from "clsx";
+import React from "react";
+import { RiProgress5Line } from "react-icons/ri";
+
+interface Props {
+    number: number;
+    isSelected?: boolean;
+}
+
+export default function WorkflowStepNumber({ number, isSelected = false }: Props) {
+    return (
+        <div
+            className={clsx(
+                'flex items-center justify-center w-10 h-10 rounded-full',
+                {
+                    'bg-mti-purple text-mti-purple-ultralight': isSelected,
+                    'bg-mti-purple-ultralight text-gray-500': !isSelected,
+                }
+            )}
+        >
+            <span className="text-lg font-semibold">{number}</span>
+        </div>
+    );
+};