Refactor Timeline component to a functional component

- Converted class-based component to functional component

- Removed render() method

- Used destructuring for props for cleaner code

- No hooks were required since there's no state or lifecycle methods

ChatGPT reference: https://chat.openai.com/share/2c6fc7ca-e51e-4446-af09-d77e79a7d0c5

src/common/Timeline.js

@@ -1,32 +1,27 @@
 import React from 'react';
-
 import style from './Timeline.module.scss';
 
-class Timeline extends React.Component {
-    render() {
-        const steps = this.props.steps;
-        const currentStep = this.props.currentStep;
-        return (
-            <ul className={style.Timeline}>
-                {steps.map((step, index) => {
-                    const stepClasses = [style.Timeline_item];
-
-                    if(index + 1 < currentStep) {
-                        stepClasses.push(style.Timeline_item__completed);
-                    } else if(currentStep === index + 1) {
-                        stepClasses.push(style.Timeline_item__current);
-                    }
+const Timeline = ({ steps, currentStep }) => {
+    return (
+      <ul className={style.Timeline}>
+          {steps.map((step, index) => {
+              const stepClasses = [style.Timeline_item];
+
+              if(index + 1 < currentStep) {
+                  stepClasses.push(style.Timeline_item__completed);
+              } else if(currentStep === index + 1) {
+                  stepClasses.push(style.Timeline_item__current);
+              }
 
-                    return (
-                        <li className={stepClasses.join(' ')} key={index}>
-                            <div className={style.Timeline_item_circle}></div>
-                            <span className={style.Timeline_item_text}>{step}</span>
-                        </li>
-                    )
-                })}
-            </ul>
-        );
-    }
+              return (
+                <li className={stepClasses.join(' ')} key={index}>
+                    <div className={style.Timeline_item_circle}></div>
+                    <span className={style.Timeline_item_text}>{step}</span>
+                </li>
+              )
+          })}
+      </ul>
+    );
 }
 
-export default Timeline;
+export default Timeline;