Hugging Face's logo

Spaces:
Bogdan555
/
grantforge-api
Running

App Files Community
grantforge-api
File size: 2,523 Bytes
3b7f713
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import { useState, useEffect } from 'react';
// @ts-ignore
import { Joyride, Step, STATUS } from 'react-joyride';

interface OnboardingTourProps {
   run: boolean;
   steps?: Step[];
   onFinish: () => void;
}

const defaultGlobalSteps: Step[] = [
    {
      target: '.sidebar-menu',
      content: 'Tutaj znajduje si臋 g艂贸wne menu aplikacji, dzi臋ki kt贸remu przejdziesz do swoich projekt贸w i ustawie艅.',
    },
    {
      target: '.new-project-btn',
      content: 'Kliknij ten przycisk, aby wygenerowa膰 nowy wniosek o dofinansowanie przy pomocy sztucznej inteligencji.',
    },
    {
      target: '.projects-list',
      content: 'W tym miejscu zobaczysz wszystkie swoje aktualne i zako艅czone projekty.',
    },
    {
      target: '.user-profile-menu',
      content: 'Tutaj zarz膮dzasz swoim kontem, subskrypcj膮 oraz znajdziesz przycisk wylogowania.',
    }
];

export const OnboardingTour: React.FC<OnboardingTourProps> = ({ run, steps = defaultGlobalSteps, onFinish }) => {
   const [mounted, setMounted] = useState(false);

   useEffect(() => {
       setMounted(true);
   }, []);

   const handleJoyrideCallback = (data: any) => {
       const { status, action } = data;
       const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
       
       if (finishedStatuses.includes(status) || action === 'close') {
           onFinish();
       }
   };

   if (!mounted) return null;

   return (
       <Joyride
          steps={steps}
          run={run}
          continuous={true}
          showSkipButton={true}
          showProgress={true}
          callback={handleJoyrideCallback}
          styles={{
             options: {
                 arrowColor: 'var(--bg-elevated)',
                 backgroundColor: 'var(--bg-elevated)',
                 textColor: 'var(--text-primary)',
                 primaryColor: 'var(--accent-green)',
                 overlayColor: 'rgba(0, 0, 0, 0.7)',
                 zIndex: 10000,
             },
             tooltipContainer: {
                 textAlign: 'left'
             },
             buttonNext: {
                 backgroundColor: 'var(--accent-green)',
                 color: '#000',
                 fontWeight: 800,
             },
             buttonBack: {
                 color: 'var(--text-secondary)'
             },
             buttonSkip: {
                 color: 'var(--text-muted)'
             }
          }}
          locale={{ next: 'Dalej', back: 'Cofnij', skip: 'Pomi艅', last: 'Zako艅cz' }}
       />
   );
};