Skip to content

Commit 9446e6e

Browse files
AlexVOiceoverAlexVOiceover
committed
fix: typescript errors fixed
1 parent d627561 commit 9446e6e

File tree

6 files changed

+98
-825
lines changed

6 files changed

+98
-825
lines changed

‎src/components/ui/tour/HelpCenter.tsx‎

Lines changed: 98 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ interface HelpCenterProps {
1212

1313
type TabType = 'welcome' | 'tutorials' | 'features' | 'versions';
1414

15-
const HelpCenter: React.FC<HelpCenterProps> = ({ onClose, initialTab = 'welcome' }) => {
15+
const HelpCenter: React.FC<HelpCenterProps> = ({
16+
onClose,
17+
initialTab = 'welcome',
18+
}) => {
1619
const [activeTab, setActiveTab] = useState<TabType>(initialTab as TabType);
1720
const [visible, setVisible] = useState(false);
1821

@@ -27,103 +30,110 @@ const HelpCenter: React.FC<HelpCenterProps> = ({ onClose, initialTab = 'welcome'
2730
setActiveTab(tab);
2831
};
2932

30-
// Placeholder for video player
31-
const VideoPlayer = ({ src, title }: { src: string; title: string }) => (
32-
<div className="relative aspect-video bg-gray-100 rounded-lg overflow-hidden mb-3">
33-
<div className="absolute inset-0 flex items-center justify-center">
34-
<div className="text-center">
35-
<PlayCircle className="w-12 h-12 text-brand-blue mx-auto mb-2 opacity-70" />
36-
<p className="text-sm text-gray-500">
37-
{title} (Video will be available soon)
38-
</p>
39-
</div>
40-
</div>
33+
// YouTube video player
34+
const VideoPlayer = ({
35+
videoId,
36+
title,
37+
}: {
38+
videoId: string;
39+
title: string;
40+
}) => (
41+
<div className='relative aspect-video bg-gray-100 rounded-lg overflow-hidden mb-3'>
42+
<iframe
43+
src={`https://www.youtube-nocookie.com/embed/${videoId}?playsinline=1&rel=0`}
44+
title={title}
45+
className='absolute inset-0 w-full h-full'
46+
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
47+
allowFullScreen
48+
loading='lazy'
49+
referrerPolicy='no-referrer-when-downgrade'
50+
></iframe>
4151
</div>
4252
);
4353

4454
return (
45-
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
46-
<div
55+
<div className='fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50'>
56+
<div
4757
className={`bg-white rounded-lg shadow-xl w-full max-w-2xl transform transition-all duration-300 max-h-[90vh] flex flex-col ${
4858
visible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'
4959
}`}
5060
>
5161
{/* Header */}
52-
<div className="flex items-center justify-between p-4 border-b">
53-
<h2 className="text-xl font-semibold flex items-center text-brand-blue">
54-
<Info className="w-5 h-5 mr-2" />
62+
<div className='flex items-center justify-between p-4 border-b'>
63+
<h2 className='text-xl font-semibold flex items-center text-brand-blue'>
64+
<Info className='w-5 h-5 mr-2' />
5565
Help Center
5666
</h2>
57-
<button
67+
<button
5868
onClick={onClose}
59-
className="text-gray-500 hover:text-gray-700 focus:outline-none"
69+
className='text-gray-500 hover:text-gray-700 focus:outline-none'
6070
>
61-
<X className="w-5 h-5" />
71+
<X className='w-5 h-5' />
6272
</button>
6373
</div>
6474

6575
{/* Tabs - grid for mobile, flex for desktop */}
66-
<div className="grid grid-cols-4 sm:flex border-b">
76+
<div className='grid grid-cols-4 sm:flex border-b'>
6777
<button
6878
className={`px-2 sm:px-4 py-2 font-medium text-xs sm:text-sm flex flex-col sm:flex-row items-center justify-center ${
69-
activeTab === 'welcome'
70-
? 'text-brand-blue border-b-2 border-brand-blue'
79+
activeTab === 'welcome'
80+
? 'text-brand-blue border-b-2 border-brand-blue'
7181
: 'text-gray-500 hover:text-gray-700'
7282
}`}
7383
onClick={() => handleTabChange('welcome')}
7484
>
75-
<Info className="w-4 h-4 sm:mr-1 mb-1 sm:mb-0" />
85+
<Info className='w-4 h-4 sm:mr-1 mb-1 sm:mb-0' />
7686
<span>About</span>
7787
</button>
7888
<button
7989
className={`px-2 sm:px-4 py-2 font-medium text-xs sm:text-sm flex flex-col sm:flex-row items-center justify-center ${
80-
activeTab === 'tutorials'
81-
? 'text-brand-blue border-b-2 border-brand-blue'
90+
activeTab === 'tutorials'
91+
? 'text-brand-blue border-b-2 border-brand-blue'
8292
: 'text-gray-500 hover:text-gray-700'
8393
}`}
8494
onClick={() => handleTabChange('tutorials')}
8595
>
86-
<PlayCircle className="w-4 h-4 sm:mr-1 mb-1 sm:mb-0" />
96+
<PlayCircle className='w-4 h-4 sm:mr-1 mb-1 sm:mb-0' />
8797
<span>Tutorials</span>
8898
</button>
8999
<button
90100
className={`px-2 sm:px-4 py-2 font-medium text-xs sm:text-sm flex flex-col sm:flex-row items-center justify-center ${
91-
activeTab === 'features'
92-
? 'text-brand-blue border-b-2 border-brand-blue'
101+
activeTab === 'features'
102+
? 'text-brand-blue border-b-2 border-brand-blue'
93103
: 'text-gray-500 hover:text-gray-700'
94104
}`}
95105
onClick={() => handleTabChange('features')}
96106
>
97-
<BookOpen className="w-4 h-4 sm:mr-1 mb-1 sm:mb-0" />
107+
<BookOpen className='w-4 h-4 sm:mr-1 mb-1 sm:mb-0' />
98108
<span>Features</span>
99109
</button>
100110
<button
101111
className={`px-2 sm:px-4 py-2 font-medium text-xs sm:text-sm flex flex-col sm:flex-row items-center justify-center ${
102-
activeTab === 'versions'
103-
? 'text-brand-blue border-b-2 border-brand-blue'
112+
activeTab === 'versions'
113+
? 'text-brand-blue border-b-2 border-brand-blue'
104114
: 'text-gray-500 hover:text-gray-700'
105115
}`}
106116
onClick={() => handleTabChange('versions')}
107117
>
108-
<History className="w-4 h-4 sm:mr-1 mb-1 sm:mb-0" />
118+
<History className='w-4 h-4 sm:mr-1 mb-1 sm:mb-0' />
109119
<span>Versions</span>
110120
</button>
111121
</div>
112122

113123
{/* Content - scrollable */}
114-
<div className="flex-1 overflow-y-auto p-5">
124+
<div className='flex-1 overflow-y-auto p-5'>
115125
{/* Welcome Tab */}
116126
{activeTab === 'welcome' && (
117127
<div>
118-
<h3 className="text-lg font-medium text-gray-800 mb-3">
128+
<h3 className='text-lg font-medium text-gray-800 mb-3'>
119129
{helpContent.welcome.title}
120130
</h3>
121-
<p className="text-gray-700 mb-4">
131+
<p className='text-gray-700 mb-4'>
122132
{helpContent.welcome.description}
123133
</p>
124134

125-
<h4 className="font-medium text-gray-800 mb-2">Key Benefits:</h4>
126-
<ul className="list-disc pl-5 space-y-1 mb-5 text-gray-700">
135+
<h4 className='font-medium text-gray-800 mb-2'>Key Benefits:</h4>
136+
<ul className='list-disc pl-5 space-y-1 mb-5 text-gray-700'>
127137
{helpContent.welcome.keyBenefits.map((benefit, index) => (
128138
<li key={index}>{benefit}</li>
129139
))}
@@ -134,35 +144,35 @@ const HelpCenter: React.FC<HelpCenterProps> = ({ onClose, initialTab = 'welcome'
134144
{/* Tutorials Tab */}
135145
{activeTab === 'tutorials' && (
136146
<div>
137-
<h3 className="text-lg font-medium text-gray-800 mb-3">
147+
<h3 className='text-lg font-medium text-gray-800 mb-3'>
138148
Tutorial Videos
139149
</h3>
140150

141-
<div className="space-y-6">
151+
<div className='space-y-6'>
142152
{/* Desktop Tutorial */}
143-
<div className="bg-gray-50 p-4 rounded-lg">
144-
<h4 className="font-medium text-gray-800 mb-2">
153+
<div className='bg-gray-50 p-4 rounded-lg'>
154+
<h4 className='font-medium text-gray-800 mb-2'>
145155
{helpContent.tutorials.desktop.title}
146156
</h4>
147-
<VideoPlayer
148-
src={helpContent.tutorials.desktop.videoUrl}
157+
<VideoPlayer
158+
videoId='B0V24-WaYH0'
149159
title={helpContent.tutorials.desktop.title}
150160
/>
151-
<p className="text-gray-700">
161+
<p className='text-gray-700'>
152162
{helpContent.tutorials.desktop.description}
153163
</p>
154164
</div>
155165

156166
{/* Mobile Tutorial */}
157-
<div className="bg-gray-50 p-4 rounded-lg">
158-
<h4 className="font-medium text-gray-800 mb-2">
167+
<div className='bg-gray-50 p-4 rounded-lg'>
168+
<h4 className='font-medium text-gray-800 mb-2'>
159169
{helpContent.tutorials.mobile.title}
160170
</h4>
161-
<VideoPlayer
162-
src={helpContent.tutorials.mobile.videoUrl}
171+
<VideoPlayer
172+
videoId='B0V24-WaYH0'
163173
title={helpContent.tutorials.mobile.title}
164174
/>
165-
<p className="text-gray-700">
175+
<p className='text-gray-700'>
166176
{helpContent.tutorials.mobile.description}
167177
</p>
168178
</div>
@@ -173,28 +183,26 @@ const HelpCenter: React.FC<HelpCenterProps> = ({ onClose, initialTab = 'welcome'
173183
{/* Features Tab */}
174184
{activeTab === 'features' && (
175185
<div>
176-
<h3 className="text-lg font-medium text-gray-800 mb-3">
186+
<h3 className='text-lg font-medium text-gray-800 mb-3'>
177187
Features & How-To
178188
</h3>
179189

180-
<div className="space-y-6">
190+
<div className='space-y-6'>
181191
{helpContent.features.map((feature, index) => (
182-
<div key={index} className="bg-gray-50 p-4 rounded-lg">
183-
<h4 className="font-medium text-gray-800 mb-2">
192+
<div key={index} className='bg-gray-50 p-4 rounded-lg'>
193+
<h4 className='font-medium text-gray-800 mb-2'>
184194
{feature.title}
185195
</h4>
186-
<p className="text-gray-700 mb-3">
187-
{feature.description}
188-
</p>
196+
<p className='text-gray-700 mb-3'>{feature.description}</p>
189197
{feature.details && (
190-
<p className="text-gray-700 mb-3">
191-
{feature.details}
192-
</p>
198+
<p className='text-gray-700 mb-3'>{feature.details}</p>
193199
)}
194200
{feature.steps && (
195201
<>
196-
<h5 className="font-medium text-gray-800 mb-1">Steps:</h5>
197-
<ol className="list-decimal pl-5 space-y-1 text-gray-700">
202+
<h5 className='font-medium text-gray-800 mb-1'>
203+
Steps:
204+
</h5>
205+
<ol className='list-decimal pl-5 space-y-1 text-gray-700'>
198206
{feature.steps.map((step, stepIndex) => (
199207
<li key={stepIndex}>{step}</li>
200208
))}
@@ -210,27 +218,39 @@ const HelpCenter: React.FC<HelpCenterProps> = ({ onClose, initialTab = 'welcome'
210218
{/* Versions Tab */}
211219
{activeTab === 'versions' && (
212220
<div>
213-
<h3 className="text-lg font-medium text-gray-800 mb-3">
221+
<h3 className='text-lg font-medium text-gray-800 mb-3'>
214222
Version History
215223
</h3>
216224

217-
<div className="space-y-6">
225+
<div className='space-y-6'>
218226
{helpContent.versions.map((version, index) => (
219-
<div key={index} className="bg-gray-50 p-4 rounded-lg">
220-
<h4 className="font-medium text-gray-800 mb-2">
221-
Version {version.version} <span className="text-gray-500 font-normal">({version.date})</span>
227+
<div key={index} className='bg-gray-50 p-4 rounded-lg'>
228+
<h4 className='font-medium text-gray-800 mb-2'>
229+
Version {version.version}{' '}
230+
<span className='text-gray-500 font-normal'>
231+
({version.date})
232+
</span>
222233
</h4>
223-
<ul className="space-y-1">
234+
<ul className='space-y-1'>
224235
{version.changes.map((change, changeIndex) => (
225-
<li key={changeIndex} className="flex items-start gap-2">
226-
<span className={`inline-block px-2 py-0.5 text-xs rounded ${
227-
change.type === 'feature' ? 'bg-green-100 text-green-800' :
228-
change.type === 'fix' ? 'bg-blue-100 text-blue-800' :
229-
'bg-gray-100 text-gray-800'
230-
}`}>
236+
<li
237+
key={changeIndex}
238+
className='flex items-start gap-2'
239+
>
240+
<span
241+
className={`inline-block px-2 py-0.5 text-xs rounded ${
242+
change.type === 'feature'
243+
? 'bg-green-100 text-green-800'
244+
: change.type === 'fix'
245+
? 'bg-blue-100 text-blue-800'
246+
: 'bg-gray-100 text-gray-800'
247+
}`}
248+
>
231249
{change.type}
232250
</span>
233-
<span className="text-gray-700">{change.description}</span>
251+
<span className='text-gray-700'>
252+
{change.description}
253+
</span>
234254
</li>
235255
))}
236256
</ul>
@@ -242,8 +262,8 @@ const HelpCenter: React.FC<HelpCenterProps> = ({ onClose, initialTab = 'welcome'
242262
</div>
243263

244264
{/* Footer */}
245-
<div className="border-t p-4 flex justify-end">
246-
<Button variant="outline" onClick={onClose}>
265+
<div className='border-t p-4 flex justify-end'>
266+
<Button variant='outline' onClick={onClose}>
247267
Close
248268
</Button>
249269
</div>
@@ -252,4 +272,4 @@ const HelpCenter: React.FC<HelpCenterProps> = ({ onClose, initialTab = 'welcome'
252272
);
253273
};
254274

255-
export default HelpCenter;
275+
export default HelpCenter;

‎src/components/ui/tour/TourButton.tsx‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)