You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.7 KiB
87 lines
2.7 KiB
import React, {useState} from "react"; |
|
import separate from "../../utils/separate"; |
|
import './index.css' |
|
|
|
function Stepper({ |
|
direction, |
|
activeColor, |
|
deactiveColor, |
|
count, |
|
currentStep, |
|
steps, |
|
onStepClick |
|
}) { |
|
|
|
|
|
return ( |
|
<div |
|
className={`flex items-center ${ |
|
direction === "horizontal" ? "flex-row justify-between" : "flex-col" |
|
}`} |
|
> |
|
{steps.map((item, index) => ( |
|
<div |
|
className={`flex items-center w-full relative ${ |
|
direction === "horizontal" ? "flex-row justify-between" : "flex-col justify-start" |
|
}`} |
|
> |
|
<div className="flex items-center justify-start w-full"> |
|
<div |
|
className="w-8 h-8 text-white text-sm rounded-full flex justify-center items-center" |
|
style={{ |
|
backgroundColor: |
|
item.active ? activeColor : '#fff', |
|
border: item.active ? '' : '1px solid #c8c8c8' |
|
}} |
|
> |
|
{ |
|
item.active ? <svg width="37" height="37" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
<path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/> |
|
</svg> |
|
: null |
|
} |
|
</div> |
|
<div className="flex justify-center items-center"> |
|
<p className="mr-3 ml-1 text-xl font-bold text-red-500 text-opacity-50">{index + 1}</p> |
|
<p className={` giveMeEllipsis font-bold ${item.active ? 'text-red26' : 'text-gray-400'} ${direction === 'horizontal' && 'text-xs' }`}> {item.title}</p> |
|
</div> |
|
</div> |
|
{count !== (Number(index) + 1) && ( |
|
<span |
|
className={`transform my-1 ${ |
|
direction === "horizontal" |
|
? "w-full h-2 mx-4" |
|
: "h-8 w-1 rounded-xl" |
|
}`} |
|
style={{ |
|
opacity: '0.5', |
|
background: item.active ? activeColor : deactiveColor, |
|
// borderTop: direction === "horizontal" ? `3px solid ${ |
|
// currentStep === Number(index) ? activeColor : deactiveColor |
|
// }` : '', |
|
// borderRight: direction === "vertical" ? `3px solid ${ |
|
// currentStep === Number(index) ? activeColor : deactiveColor |
|
// }` : '', |
|
transform : `${direction === "horizontal" ? 'translateY(1px)' : 'translateX(64px)'}` |
|
}} |
|
></span> |
|
|
|
)} |
|
|
|
</div> |
|
|
|
))} |
|
</div> |
|
); |
|
} |
|
|
|
|
|
export default Stepper; |
|
|
|
Stepper.defaultProps = { |
|
direction: "vertical", |
|
activeColor: "#df1452", |
|
deactiveColor: "#DBDBDB", |
|
|
|
|
|
};
|
|
|