1import Joyride from 'react-joyride';
 2import {useTheme} from '@material-ui/core/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
13  return (
14    <Joyride
15      run={run}
16      steps={steps}
17      stepIndex={step}
18      callback={onTourChange}
19      locale={t('joyride', {returnObjects: true})}
20      continuous={true}
21      showProgress={true}
22      disableScrolling={true}
23      disableScrollParentFix={true}
24      scrollToFirstStep={false}
25      floaterProps={{
26        disableAnimation: true,
27      }}
28      styles={{
29        options: {
30          primaryColor: theme.palette.primary.main,
31        },
32        tooltipContent: {
33          whiteSpace: 'pre-wrap',
34        },
35      }}
36    />
37  );
38};
39
40export default OnBoardingTour;