Merge pull request #18 from bluewave-labs/feat/stepper

Feat/stepper

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;

Client/src/Pages/Demo/Demo.jsx

@@ -3,6 +3,7 @@ import Button from "../../Components/Button";
 import Link from "../../Components/Link";
 import ColoredLabel from "../../Components/Label/ColoredLabel";
 import {
+  Box,
   useTheme,
   Switch,
   Checkbox,
@@ -16,6 +17,7 @@ import {
 } from "@mui/material";
 import StatusLabel from "../../Components/Label/StautsLabel";
 import Avatar from "../../Components/Avatar/Avatar";
+import ProgressStepper from "../../Components/ProgressStepper/ProgressStepper";
 import avatarImage from "../../assets/Images/avatar_placeholder.png";
 import { DataGrid } from "@mui/x-data-grid";
 
@@ -76,6 +78,12 @@ const rows = ((count) => {
   return arr;
 })(100);
 
+const steps = [
+  { label: "Your details", content: "Please provide your name and email" },
+  { label: "Company details", content: "A few details about your company" },
+  { label: "Invite your team", content: "Start collaborating with your team" },
+];
+
 const Demo = () => {
   const [radio, setRadio] = React.useState(1);
   const [tab, setTab] = React.useState("departments");
@@ -211,6 +219,11 @@ const Demo = () => {
         </LocalizationProvider>
         <h4>{date}</h4>
       </div>
+
+      <h4>Stepper</h4>
+      <div>
+        <ProgressStepper steps={steps}></ProgressStepper>
+      </div>
     </div>
   );
 };