changes in the model assigning to inspector

src/components/headings/HeadingSteps.module.css

+@import url("../../styles/colors.css");
+@import url("../../assets/fonts/fonts.css");
+:root {
+  --circle-size: clamp(1.5rem, 5vw, 3rem);
+  --spacing: clamp(0.25rem, 2vw, 0.5rem);
+}
+
+.heading_five {
+  color: var(--black-87);
+  font-family: "Lato-Bold";
+  font-size: 0.875rem;
+  letter-spacing: 0.25px;
+  line-height: 1.429;
+  padding-top: 0.3rem;
+}
+
+.heading_prefix_circle {
+  background-color: var(--white-90);
+  border-radius: 50%;
+  color: var(--blue-primary);
+  font-family: "Montserrat-SemiBold";
+  font-size: 1rem;
+  text-align: center;
+  padding-top: 0.20rem;
+  letter-spacing: 0.12px;
+  line-height: 1.5;
+  height: 1.875rem;
+  width: 1.875rem;
+  border: 1px solid var(--blue-primary);
+}
+
+.stepper {
+    --size: 3rem;
+    --spacing: -0.5rem;
+}
+
+.stepper__item {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    text-align: center;
+}
+.active_step {
+    background-color:var(--blue-primary);
+    color: #ffffff;
+}
+.stepper__item:not(:last-child):after {
+      content: "";
+      position: relative;
+      top: calc(var(--circle-size) / 3);
+      width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
+      left: calc(48% + calc(var(--circle-size) / 2 + var(--spacing)));
+      height: 2px;
+      background-color: #e0e0e0;
+      order: -1;
+}
\ No newline at end of file

src/components/headings/HeadingSteps.tsx

+import styles from "./HeadingSteps.module.css";
+
+/**
+ * HeadingFive component renders
+ * larger variant of headings with prefix icon
+ */
+
+interface HeadingStepsProps {
+    stepsData: any;
+}
+
+export const HeadingSteps = ({ stepsData}: HeadingStepsProps) => {
+return(
+    <ul className={`${styles.stepper}  d-flex flex-row justify-content-center align-items-center w-100`}>
+    {stepsData && stepsData.map((i:any) => {
+            return(
+                <li className={`${styles.stepper__item}  d-flex flex-column justify-content-center align-items-center me-3`}>
+                <div className={`${styles.heading_prefix_circle} ${i.active?styles.active_step:''}`}>{i.count}</div>
+                <div className={`${styles.heading_five}`}>{i.label}</div>
+            </li>
+            )
+    })}
+    </ul>
+)
+};

src/components/headings/index.ts

@@ -2,3 +2,4 @@ export { HeadingOne } from "./HeadingOne";
 export { HeadingTwo } from "./HeadingTwo";
 export { HeadingFour } from "./HeadingFour";
 export { HeadingFive } from "./HeadingFive";
+export { HeadingSteps } from "./HeadingSteps";

src/components/modal/InspectionScheduleModal.tsx

@@ -5,7 +5,7 @@ import btnStyle from "../buttons/BtnOne.module.css";
 import btnStyleTwo from "../buttons/BtnTwo.module.css";
 import { SelectField, TextField } from "../form-elements";
 import { BtnOne } from "../buttons";
-import { HeadingFive } from "../headings";
+import { HeadingFive, HeadingSteps } from "../headings";
 import moment from "moment";
 import { APP, LANG } from "../../constants";
 import { ReviewService } from "../../services";
@@ -63,6 +63,15 @@ export const InspectionScheduleModal = ({
   const [disableSubmit, setDisableSubmit] = useState(true);
 
   let history = useHistory();
+  let stepsData = [{
+    label:'Schedule the inspection',
+    count: 1,
+    active: true
+  },{
+    label:'Schedule the inspection',
+    count: 2,
+    active: false
+  }]
 
   useEffect(() => {
     ReviewService.getAllInspectors().then(
@@ -384,12 +393,13 @@ export const InspectionScheduleModal = ({
       <div className="modal-dialog modal-lg">
         <div className={`${styles.custom_model_content} modal-content`}>
           <div className={`${styles.custom_modal_footer} modal-header`}>
-            <h5
+            {/* <h5
               className={`${styles.custom_modal_title} modal-title`}
               id="staticBackdropLabel"
             >
               {heading}
-            </h5>
+            </h5> */}
+            <HeadingSteps stepsData={stepsData}></HeadingSteps>
           </div>
 
           {/* Body */}