wehub-resource-sync
57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import { MixpanelEvent, trackEvent } from '@/utils/mixpanel'
|
|
|
|
const STEPS = ["Text Provider", "Image Provider", "Web Search", "Finish Setup"];
|
|
|
|
const OnBoardingHeader = ({
|
|
currentStep,
|
|
providerStep,
|
|
setStep,
|
|
setProviderStep,
|
|
}: {
|
|
currentStep: number,
|
|
providerStep: number,
|
|
setStep: (step: number) => void,
|
|
setProviderStep: (step: number) => void,
|
|
}) => {
|
|
const activeStep = currentStep === 3 ? 4 : providerStep;
|
|
|
|
const goToStep = (target: number) => {
|
|
if (target >= activeStep) return;
|
|
trackEvent(MixpanelEvent.Onboarding_Back_Clicked, {
|
|
from_step_number: activeStep,
|
|
to_step_number: target,
|
|
source: "progress_header",
|
|
});
|
|
setProviderStep(target);
|
|
setStep(2);
|
|
};
|
|
|
|
return (
|
|
<div className='sticky top-8 z-20 flex items-center font-syne justify-end mt-7 mb-[52px]'>
|
|
<div className='flex items-center gap-1'>
|
|
{STEPS.map((label, index) => {
|
|
const number = index + 1;
|
|
return (
|
|
<React.Fragment key={label}>
|
|
{index > 0 && <div className='w-4 h-px bg-[#ECECEF]' />}
|
|
<button
|
|
type="button"
|
|
onClick={() => goToStep(number)}
|
|
className={`flex items-center gap-1 ${number < activeStep ? "cursor-pointer" : "cursor-default"}`}
|
|
>
|
|
<div className={`${activeStep === number ? 'bg-[#010100] text-white' : 'border border-[#ECECEF] text-[#494A4D]'} h-7 w-7 text-xs font-medium rounded-full flex items-center justify-center`}>
|
|
{number}
|
|
</div>
|
|
<p className='hidden xl:block text-[#010000] text-xs'>{label}</p>
|
|
</button>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default OnBoardingHeader
|