update data.js

src/components/Stepper/index.js

@@ -0,0 +1,84 @@
+import React from "react";
+
+function Stepper({
+  direction,
+  activeColor,
+  deactiveColor,
+  count,
+  currentStep,
+}) {
+  const array = Array(count);
+  return (
+    <div
+      className={`flex items-center ${
+        direction === "horizontal" ? "flex-row" : "flex-col"
+      }`}
+    >
+      {[1,2,3,4,5,6,7].map((item, index) => (
+        <Step
+          index={index}
+          currentStep={currentStep}
+          direction={direction}
+          activeColor={activeColor}
+          deactiveColor={deactiveColor}
+          count={count}
+        />
+      ))}
+    </div>
+  );
+}
+
+const Step = ({
+  index,
+  currentStep,
+  direction,
+  activeColor,
+  deactiveColor,
+  count,
+}) => {
+  return (
+    <div
+      className={`flex items-center relative ${
+        direction === "horizontal" ? "flex-row" : "flex-col"
+      }`}
+    >
+      <div
+        className="w-12 h-12 text-white text-sm rounded-full flex justify-center items-center"
+        style={{
+          backgroundColor:
+            currentStep === Number(index) ? activeColor : deactiveColor,
+        }}
+      >
+        {Number(index) + 1}
+      </div>
+      {count !== (Number(index) + 1) && (
+        <span
+          className={`transform ${
+            direction === "horizontal"
+              ? "w-10 h-1"
+              : "h-10 w-1"
+          }`}
+          style={{
+            borderTop: direction === "horizontal" ? `2px dotted ${
+              currentStep === Number(index) ? activeColor : deactiveColor
+            }` : '',
+            borderRight: direction === "vertical" ? `2px dotted ${
+              currentStep === Number(index) ? activeColor : deactiveColor
+            }` : '',
+            transform : `${direction === "horizontal" ? 'translateY(1px)' : 'translateX(-1px)'}`
+          }}
+        ></span>
+      )}
+    </div>
+  );
+};
+
+export default Stepper;
+
+Stepper.defaultProps = {
+  direction: "vertical",
+  activeColor: "#06BACE",
+  deactiveColor: "#DBDBDB",
+  count: 7,
+  currentStep : 4,
+};

src/redux/data.js

@@ -34,6 +34,7 @@ import SearchWithSuggestion from "../components/SearchWithSuggestion";
 import SelectBox from "../components/SelectBox";
 import ProductCategories from "../components/ProductCategories";
 import RangeSlider from "../components/RangeSlider";
+import Stepper from "../components/Stepper";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -687,6 +688,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Stepper",
+    author: "Ashrafi",
+    props: [],
+    content: {
+      name: "Stepper",
+      component: <Stepper />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",