diff --git a/src/components/dashboard/LearningHub.tsx b/src/components/dashboard/LearningHub.tsx index 74b91b8c..c14853cb 100644 --- a/src/components/dashboard/LearningHub.tsx +++ b/src/components/dashboard/LearningHub.tsx @@ -5,9 +5,11 @@ import React, { useState, useEffect } from 'react'; import { BookOpen, Video, Code, Award, CheckCircle, Play, ChevronRight } from 'lucide-react'; +import { useTranslation } from 'react-i18next'; import { learningHub, Tutorial, UserProgress } from '../../lib/learningHub'; export const LearningHub: React.FC = () => { + const { t } = useTranslation(); const [tutorials, setTutorials] = useState([]); const [progress, setProgress] = useState(null); const [selectedTutorial, setSelectedTutorial] = useState(null); @@ -43,7 +45,7 @@ export const LearningHub: React.FC = () => { return (
-

Loading learning hub...

+

{t('learningHub.loading')}

); } @@ -65,9 +67,9 @@ export const LearningHub: React.FC = () => { return (
-

Learning Hub

+

{t('learningHub.title')}

- Master Stellar blockchain development with interactive tutorials, quizzes, and certifications + {t('learningHub.subtitle')}

@@ -81,14 +83,14 @@ export const LearningHub: React.FC = () => { marginBottom: '2rem', }} > - + - +
)} @@ -110,7 +112,7 @@ export const LearningHub: React.FC = () => { transition: 'all 0.2s', }} > - {category} + {t(`learningHub.category.${category}`)} ))}
@@ -137,7 +139,7 @@ export const LearningHub: React.FC = () => { border: '1px dashed var(--border)', }} > -

No tutorials found in this category

+

{t('learningHub.tutorial.noFound')}

)} @@ -174,6 +176,7 @@ const TutorialCard: React.FC<{ isCompleted: boolean; onSelect: () => void; }> = ({ tutorial, isCompleted, onSelect }) => { + const { t } = useTranslation(); const difficultyColors = { beginner: 'var(--success)', intermediate: 'var(--warning)', @@ -237,7 +240,7 @@ const TutorialCard: React.FC<{ textTransform: 'capitalize', }} > - {tutorial.difficulty} + {t(`learningHub.tutorial.difficulty.${tutorial.difficulty}`)} - {tutorial.duration} min + {t('learningHub.tutorial.duration', { min: tutorial.duration })} @@ -263,6 +266,7 @@ const TutorialView: React.FC<{ onBack: () => void; isCompleted: boolean; }> = ({ tutorial, userId, onBack, isCompleted }) => { + const { t } = useTranslation(); const [activeTab, setActiveTab] = useState<'content' | 'playground' | 'quiz'>('content'); const [quizAnswers, setQuizAnswers] = useState([]); const [quizSubmitted, setQuizSubmitted] = useState(false); @@ -270,7 +274,7 @@ const TutorialView: React.FC<{ const handleQuizSubmit = async () => { if (!tutorial.quiz || quizAnswers.length !== tutorial.quiz.questions.length) { - alert('Please answer all questions'); + alert(t('learningHub.quiz.answerAll')); return; } @@ -299,7 +303,7 @@ const TutorialView: React.FC<{ gap: '0.5rem', }} > - ← Back to Hub + {t('learningHub.back')}
@@ -318,7 +322,7 @@ const TutorialView: React.FC<{ gap: '0.25rem', }} > - Completed + {t('learningHub.tutorial.completed')} )}
@@ -328,20 +332,20 @@ const TutorialView: React.FC<{ {/* Tabs */}
setActiveTab('content')} /> setActiveTab('playground')} /> {tutorial.quiz && ( setActiveTab('quiz')} @@ -385,9 +389,9 @@ const TutorialView: React.FC<{ {activeTab === 'playground' && (
-

Interactive Code Playground

+

{t('learningHub.playground.title')}