2022-10-30 16:56:26 +00:00
|
|
|
import { memo } from 'react';
|
|
|
|
|
|
|
|
function ProgressBar({ count, currentTab, switchTab }) {
|
2021-07-02 20:29:33 +00:00
|
|
|
return (
|
2022-04-08 13:48:36 +00:00
|
|
|
<div className="progressbar">
|
2021-08-28 18:14:22 +00:00
|
|
|
{count.map((num) => {
|
2021-07-02 20:29:33 +00:00
|
|
|
let className = 'step';
|
|
|
|
|
2021-08-28 18:14:22 +00:00
|
|
|
const index = count.indexOf(num);
|
|
|
|
if (index === currentTab) {
|
2021-07-02 20:29:33 +00:00
|
|
|
className = 'step active';
|
|
|
|
}
|
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
return <div className={className} key={index} onClick={() => switchTab(index)} />;
|
2021-07-02 20:29:33 +00:00
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
2021-07-12 10:34:05 +00:00
|
|
|
}
|
2022-10-30 16:56:26 +00:00
|
|
|
|
2022-11-06 11:59:59 +00:00
|
|
|
export default memo(ProgressBar);
|