1import Joyride from 'react-joyride';
 2import {useTheme} from '@mui/material/styles';
 3import {useTranslation} from 'react-i18next';
 4import useTour from '../../hooks/useTour';
 5
 6interface Props {}
 7
 8const OnBoardingTour = (props: Props) => {
 9  const theme = useTheme();
10  const {t} = useTranslation();
11  const {run, steps, step, onTourChange} = useTour();
12  const translateStep = ({content, ...step}) => ({
13    content: t(content),
14    ...step,
15  });
16
17  return (
18    <Joyride
19      run={run}
20      steps={steps.map(translateStep)}
21      stepIndex={step}
22      callback={onTourChange}
23      locale={t('joyride', {returnObjects: true})}
24      continuous={true}
25      showProgress={true}
26      disableScrolling={true}
27      disableScrollParentFix={true}
28      scrollToFirstStep={false}
29      floaterProps={{
30        disableAnimation: true,
31      }}
32      styles={{
33        options: {
34          primaryColor: theme.palette.primary.main,
35        },
36        tooltipContent: {
37          whiteSpace: 'pre-wrap',
38        },
39      }}
40    />
41  );
42};
43
44export default OnBoardingTour;