update data.js

master
mahdi 2 years ago
parent 8aec90b62f
commit c4afe44969
  1. 84
      src/components/Stepper/index.js
  2. 11
      src/redux/data.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,
};

@ -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",

Loading…
Cancel
Save