2023-03-21 19:59:16 +00:00
|
|
|
import { memo } from 'react';
|
2022-10-30 16:56:26 +00:00
|
|
|
|
2024-02-19 19:51:12 +00:00
|
|
|
const Step = memo(({ isActive, index, onClick }) => {
|
|
|
|
const className = isActive ? 'step active' : 'step';
|
2021-07-02 20:29:33 +00:00
|
|
|
|
2024-02-19 19:51:12 +00:00
|
|
|
return (
|
|
|
|
<div className={className} onClick={onClick}>
|
|
|
|
<span>{index + 1}</span>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
});
|
2021-07-02 20:29:33 +00:00
|
|
|
|
2024-02-19 19:51:12 +00:00
|
|
|
function ProgressBar({ numberOfTabs, currentTab, switchTab }) {
|
|
|
|
return (
|
|
|
|
<div className="progressbar">
|
|
|
|
{Array.from({ length: numberOfTabs }, (_, index) => (
|
|
|
|
<Step
|
|
|
|
key={index}
|
|
|
|
isActive={index === currentTab}
|
|
|
|
index={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
|
|
|
|
2024-02-18 23:05:15 +00:00
|
|
|
const MemoizedProgressBar = memo(ProgressBar);
|
|
|
|
|
|
|
|
export default MemoizedProgressBar;
|
2024-03-19 21:45:17 +00:00
|
|
|
export { MemoizedProgressBar as ProgressBar };
|