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

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",
};