From c4afe44969a1af3908e92b2e8e275c5e4ff5efbe Mon Sep 17 00:00:00 2001 From: mahdi Date: Sun, 15 May 2022 17:22:44 +0430 Subject: [PATCH] update data.js --- src/components/Stepper/index.js | 84 +++++++++++++++++++++++++++++++++ src/redux/data.js | 11 +++++ 2 files changed, 95 insertions(+) create mode 100644 src/components/Stepper/index.js diff --git a/src/components/Stepper/index.js b/src/components/Stepper/index.js new file mode 100644 index 0000000..6ffac8e --- /dev/null +++ b/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 ( +
+ {[1,2,3,4,5,6,7].map((item, index) => ( + + ))} +
+ ); +} + +const Step = ({ + index, + currentStep, + direction, + activeColor, + deactiveColor, + count, +}) => { + return ( +
+
+ {Number(index) + 1} +
+ {count !== (Number(index) + 1) && ( + + )} +
+ ); +}; + +export default Stepper; + +Stepper.defaultProps = { + direction: "vertical", + activeColor: "#06BACE", + deactiveColor: "#DBDBDB", + count: 7, + currentStep : 4, +}; diff --git a/src/redux/data.js b/src/redux/data.js index 4771850..cc73ca1 100644 --- a/src/redux/data.js +++ b/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: , + code: null, + }, + }, // mini components { name: "Mini Components",