Added stepper component

Client/src/Components/ProgressStepper/ProgressStepper.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Step, Stepper, StepLabel, Typography } from "@mui/material";
+import RadioButtonCheckedIcon from "@mui/icons-material/RadioButtonChecked";
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import PropTypes from "prop-types";
+
+const CustomStepIcon = (props) => {
+  const { completed, active } = props;
+  return completed ? (
+    <CheckCircle color="primary" />
+  ) : (
+    <RadioButtonCheckedIcon color={active ? "primary" : "disabled"} />
+  );
+};
+
+CustomStepIcon.propTypes = {
+  completed: PropTypes.bool.isRequired,
+  active: PropTypes.bool.isRequired,
+};
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {Array} props.steps
+ */
+
+const ProgressStepper = ({ steps }) => {
+  const [activeStep, setActiveStep] = React.useState(1);
+  return (
+    <Stepper activeStep={activeStep} alternativeLabel>
+      {steps.map((step, index) => {
+        const color = activeStep === index ? "primary" : "inherit";
+        return (
+          <Step key={step.label} onClick={() => setActiveStep(index)}>
+            <StepLabel StepIconComponent={CustomStepIcon}>
+              <Typography
+                variant="body1"
+                color={color}
+                sx={{ fontWeight: "bold" }}
+              >
+                {step.label}
+              </Typography>
+            </StepLabel>
+            <Typography variant="body1" color={color}>
+              {step.content}
+            </Typography>
+          </Step>
+        );
+      })}
+    </Stepper>
+  );
+};
+
+ProgressStepper.propTypes = {
+  steps: PropTypes.array.isRequired,
+};
+
+export default ProgressStepper;