fix: fixe translations in watch course

No-Country-simulation · Dec 11, 2024 · 96a5bc2 · 96a5bc2
1 parent 3453a10
commit 96a5bc2
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 42 deletions.
diff --git a/client/src/app/[locale]/(auth)/courses/watch/[id]/page.tsx b/client/src/app/[locale]/(auth)/courses/watch/[id]/page.tsx
@@ -20,9 +20,10 @@ export default async function CoursesPage({
         moduleActive={moduleActive as string}
         lessonActive={lessonActive as string}
         courseId={id}
+        locale={locale}
       />
       <div className="mb-5 flex w-full flex-col justify-between space-y-8 px-[3%] min-[780px]:px-0">
-        <WatchCourseDetailSection />
+        <WatchCourseDetailSection locale={locale} />
         <RecommendedCourses courseId={id} />
       </div>
     </main>

diff --git a/client/src/features/courses/components/CourseDetails/MainContent.tsx b/client/src/features/courses/components/CourseDetails/MainContent.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import { getTranslations } from 'next-intl/server';
 import React from 'react';
 import CheckList from '@core/components/CheckList';
 import H2SimpleSection from '@core/components/H2SimpleSection';
@@ -20,6 +21,7 @@ export const MainContent = async ({
   creatorDesc,
   creatorWhyLearning,
 }: MainContentProps) => {
+  const t = await getTranslations<'CourseDetail'>({ locale: locale, namespace: 'CourseDetail' });
   return (
     <div className="w-full text-white lg:w-5/6 lg:pr-8">
       <h1 className="mb-4 text-2xl font-bold">{course?.name}</h1>
@@ -68,10 +70,10 @@ export const MainContent = async ({
           </div>
 
           {/* Sección de objetivos */}
-          <H2SimpleSection title="Despues de completar este curso, seras capaz de:">
+          <H2SimpleSection title={t('afterCompletingCourse')}>
             <CheckList items={course.courseLearnings} />
           </H2SimpleSection>
-          <H2SimpleSection title="Acerca de este curso">
+          <H2SimpleSection title={t('aboutCourse')}>
             <p className="text-sm font-normal text-white">{course.courseAbout}</p>
           </H2SimpleSection>
 
@@ -106,18 +108,18 @@ export const MainContent = async ({
 
           {creatorWhyLearning ? (
             <H2SimpleSection
-              title={`¿Por qué aprender con ${course.creatorName}?`}
+              title={t('whyLearnWith', { creatorName: course.creatorName })}
               titleVariant="textxl">
               <p className="text-sm font-normal text-white">{creatorWhyLearning}</p>
             </H2SimpleSection>
           ) : null}
-          <H2SimpleSection title={`¿Para quién es este curso?`} titleVariant="textxl">
+          <H2SimpleSection title={t('whoIsThisFor')} titleVariant="textxl">
             <p className="text-sm font-normal text-white">{course.courseObjective}</p>
           </H2SimpleSection>
-          <H2SimpleSection title={`Requisitos`} titleVariant="textxl">
+          <H2SimpleSection title={t('requirements')} titleVariant="textxl">
             <CheckList items={course.courseRequirenments} />
           </H2SimpleSection>
-          <H2SimpleSection title={`¿Qué incluye?`} titleVariant="textxl">
+          <H2SimpleSection title={t('whatIncludes')} titleVariant="textxl">
             <CheckList items={course.courseAdditions} />
           </H2SimpleSection>
         </div>

diff --git a/client/src/features/courses/components/WatchCourseDetailSection/index.tsx b/client/src/features/courses/components/WatchCourseDetailSection/index.tsx
@@ -1,15 +1,18 @@
 import Image from 'next/image';
+import { getTranslations } from 'next-intl/server';
 import Button from '@core/components/Button';
 import CheckList from '@core/components/CheckList';
 import H2SimpleSection from '@core/components/H2SimpleSection';
 import ShowMore from '@core/components/ShowMore';
+import type { Locale } from '@core/lib/i18nRouting';
 import { getContent } from '@core/services/getContent';
 import { getPlatformLogo } from '@core/services/getPlatformLogo';
 import type { CourseDetailsType } from '../../types/coursedetails.types';
 
-export default async function WatchCourseDetailSection() {
+export default async function WatchCourseDetailSection({ locale }: { locale: Locale }) {
   const courseDetail = await getContent<CourseDetailsType>('/json/course-detail.json');
-
+  const t = await getTranslations<'CourseDetail'>({ locale: locale, namespace: 'CourseDetail' });
+  const ct = await getTranslations<'Common'>({ locale: locale, namespace: 'Common' });
   if (!courseDetail) {
     return (
       <section className="mx-auto flex h-[500px] w-full items-center justify-center rounded-lg bg-white/10 p-4 shadow-app-1">
@@ -64,29 +67,29 @@ export default async function WatchCourseDetailSection() {
                 </div>
               </Button>
               <Button variant="outline" className="px-5">
-                Compartir
+                {ct('share')}
               </Button>
             </div>
           </div>
         </header>
-        <H2SimpleSection title="Despues de completar este curso, seras capaz de:">
+        <H2SimpleSection title={t('afterCompletingCourse')}>
           <CheckList items={courseDetail.courseLearnings} />
         </H2SimpleSection>
-        <H2SimpleSection title="Acerca de este curso">
+        <H2SimpleSection title={t('aboutCourse')}>
           <p className="text-sm font-normal text-white">{courseDetail.courseAbout}</p>
         </H2SimpleSection>
         <H2SimpleSection
-          title={`¿Por qué aprender con ${courseDetail.creatorName}?`}
+          title={t('whyLearnWith', { creatorName: courseDetail.creatorName })}
           titleVariant="textxl">
           <p className="text-sm font-normal text-white">{courseDetail.creatorDescription}</p>
         </H2SimpleSection>
-        <H2SimpleSection title={`¿Para quién es este curso?`} titleVariant="textxl">
+        <H2SimpleSection title={t('whoIsThisFor')} titleVariant="textxl">
           <p className="text-sm font-normal text-white">{courseDetail.courseObjective}</p>
         </H2SimpleSection>
-        <H2SimpleSection title={`Requisitos`} titleVariant="textxl">
+        <H2SimpleSection title={t('requirements')} titleVariant="textxl">
           <CheckList items={courseDetail.courseRequirenments} />
         </H2SimpleSection>
-        <H2SimpleSection title={`¿Qué incluye?`} titleVariant="textxl">
+        <H2SimpleSection title={t('whatIncludes')} titleVariant="textxl">
           <CheckList items={courseDetail.courseAdditions} />
         </H2SimpleSection>
       </section>

diff --git a/client/src/features/courses/components/WatchCourseNavigator/index.tsx b/client/src/features/courses/components/WatchCourseNavigator/index.tsx
@@ -1,34 +1,36 @@
 import Image from 'next/image';
+import { getTranslations } from 'next-intl/server';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@core/components/Tabs';
+import type { Locale } from '@core/lib/i18nRouting';
 import type { VideoModuleType } from '../../schemas/coursevideo.schemas';
 import VideoModules from '../VideoModules';
 
 interface WatchCourseNavigatorProps {
   modules: VideoModuleType[];
+  locale: Locale;
 }
 
-const WatchCourseNavigator = ({ modules }: WatchCourseNavigatorProps) => {
+const WatchCourseNavigator = async ({ modules, locale }: WatchCourseNavigatorProps) => {
+  const t = await getTranslations<'CoursesWatch'>({ locale: locale, namespace: 'CoursesWatch' });
   return (
     <Tabs defaultValue="lessons">
       <TabsList>
-        <TabsTrigger value="lessons">Lecciones</TabsTrigger>
-        <TabsTrigger value="queries">Consultas</TabsTrigger>
-        <TabsTrigger value="resources">Recursos</TabsTrigger>
+        <TabsTrigger value="lessons">{t('lesson')}</TabsTrigger>
+        <TabsTrigger value="queries">{t('consultation')}</TabsTrigger>
+        <TabsTrigger value="resources">{t('resource')}</TabsTrigger>
       </TabsList>
       <TabsContent value="lessons">
         <VideoModules modules={modules} />
       </TabsContent>
       <TabsContent value="queries">
         <div className="min-[780px]:min-h-auto flex min-h-[425px] flex-col items-center justify-start gap-y-6 py-4 pe-2 pt-24">
-          <p className="select-none text-lg font-medium text-white/70">Todabia no hay consultas</p>
+          <p className="select-none text-lg font-medium text-white/70">{t('noConsultations')}</p>
           <Image src="/svg/messages.svg" alt="messages" width="45" height="45" />
         </div>
       </TabsContent>
       <TabsContent value="resources">
         <div className="min-[780px]:min-h-auto flex min-h-[425px] flex-col items-center justify-start gap-y-6 py-4 pe-2 pt-24">
-          <p className="select-none text-lg font-medium text-white/70">
-            No hay recursos disponibles
-          </p>
+          <p className="select-none text-lg font-medium text-white/70">{t('noResources')}</p>
           <Image src="/svg/archive.svg" alt="messages" width="45" height="45" />
         </div>
       </TabsContent>

diff --git a/client/src/features/courses/components/WatchCourseSection/index.tsx b/client/src/features/courses/components/WatchCourseSection/index.tsx
@@ -1,4 +1,4 @@
-import { getLocale } from 'next-intl/server';
+import type { Locale } from '@core/lib/i18nRouting';
 import { getContent } from '@core/services/getContent';
 import { type VideoCourseType } from '../../schemas/coursevideo.schemas';
 import VideoLessons from '../VideoLessons';
@@ -9,12 +9,13 @@ const WatchCourseSection = async ({
   lessonActive,
   courseId,
   moduleActive,
+  locale,
 }: {
   lessonActive: string;
   moduleActive: string;
   courseId: string | number;
+  locale: Locale;
 }) => {
-  const locale = await getLocale();
   const course = await getContent<VideoCourseType>('/json/course.json');
 
   if (!course) {
@@ -44,7 +45,7 @@ const WatchCourseSection = async ({
         </div>
       </div>
       <div className="mx-[3%] rounded-lg bg-neutral-100 p-4 min-[780px]:mx-0 min-[1280px]:rounded-l-none min-[1280px]:bg-white/10">
-        <WatchCourseNavigator modules={course.modules} />
+        <WatchCourseNavigator locale={locale} modules={course.modules} />
       </div>
     </section>
   );

diff --git a/client/src/locales/en.json b/client/src/locales/en.json
@@ -116,7 +116,12 @@
   "CoursesWatch": {
     "metaTitle": "Klowhub - Watch Courses",
     "metaDescription": "Klowhub Watch Courses page",
-    "metaSiteName": "Klowhub - Watch Courses"
+    "metaSiteName": "Klowhub - Watch Courses",
+    "lesson": "Lessons",
+    "consultation": "Consultations",
+    "resource": "Resources",
+    "noConsultations": "There are no consultations yet",
+    "noResources": "No resources available"
   },
   "Navbar": {
     "dashboardLink": "Dashboard",
@@ -173,7 +178,8 @@
     "session": "Session",
     "filter": "Filter",
     "sort": "Sort by",
-    "search": "Search"
+    "search": "Search",
+    "share": "Share"
   },
   "NewCourse": {
     "metaTitle": "Klowhub - Create a new course",
@@ -192,7 +198,13 @@
   "CourseDetail": {
     "metaTitle": "Klowhub - Course Detail",
     "metaDescription": "Klowhub Course Detail page",
-    "metaSiteName": "Klowhub - Course Detail"
+    "metaSiteName": "Klowhub - Course Detail",
+    "afterCompletingCourse": "After completing this course, you will be able to:",
+    "aboutCourse": "About this course",
+    "whyLearnWith": "Why learn with {creatorName}?",
+    "whoIsThisFor": "Who is this course for?",
+    "requirements": "Requirements",
+    "whatIncludes": "What is included"
   },
   "TermsAndConditions": {
     "metaTitle": "Klowhub - Terms and Conditions",

diff --git a/client/src/locales/es.json b/client/src/locales/es.json
@@ -116,7 +116,12 @@
   "CoursesWatch": {
     "metaTitle": "Klowhub - Ver cursos",
     "metaDescription": "Klowhub Pagina para ver cursos",
-    "metaSiteName": "Klowhub - Ver cursos"
+    "metaSiteName": "Klowhub - Ver cursos",
+    "lesson": "Lecciones",
+    "consultation": "Consultas",
+    "resource": "Recursos",
+    "noConsultations": "Todavía no hay consultas",
+    "noResources": "No hay recursos disponibles"
   },
   "Navbar": {
     "dashboardLink": "Panel",
@@ -173,7 +178,8 @@
     "session": "Sesiones",
     "filter": "Filtrar",
     "sort": "Ordenar por",
-    "search": "Buscar"
+    "search": "Buscar",
+    "share": "Compartir"
   },
   "NewCourse": {
     "metaTitle": "Klowhub - Crear nuevo curso",
@@ -192,7 +198,13 @@
   "CourseDetail": {
     "metaTitle": "Klowhub - Detalle de curso",
     "metaDescription": "Klowhub Pagina del detalle del curso",
-    "metaSiteName": "Klowhub - Detalle de curso"
+    "metaSiteName": "Klowhub - Detalle de curso",
+    "afterCompletingCourse": "Después de completar este curso, serás capaz de:",
+    "aboutCourse": "Acerca de este curso",
+    "whyLearnWith": "¿Por qué aprender con {creatorName}?",
+    "whoIsThisFor": "¿Para quién es este curso?",
+    "requirements": "Requisitos",
+    "whatIncludes": "Qué incluye"
   },
   "TermsAndConditions": {
     "metaTitle": "Klowhub - Términos y condiciones",

diff --git a/client/src/locales/fr.json b/client/src/locales/fr.json
@@ -116,7 +116,12 @@
   "CoursesWatch": {
     "metaTitle": "Klowhub - Regarder des cours",
     "metaDescription": "Page de Klowhub pour regarder des cours",
-    "metaSiteName": "Klowhub - Regarder des cours"
+    "metaSiteName": "Klowhub - Regarder des cours",
+    "lesson": "Leçons",
+    "consultation": "Consultations",
+    "resource": "Ressources",
+    "noConsultations": "Il n'y a pas encore de consultations",
+    "noResources": "Aucune ressource disponible"
   },
   "Navbar": {
     "dashboardLink": "Tableau de bord",
@@ -173,7 +178,8 @@
     "session": "Session",
     "filter": "Filtrer",
     "sort": "Trier par",
-    "search": "Rechercher"
+    "search": "Rechercher",
+    "share": "Partager"
   },
   "NewCourse": {
     "metaTitle": "Klowhub - Créer un nouveau cours",
@@ -192,7 +198,13 @@
   "CourseDetail": {
     "metaTitle": "Klowhub - Détail du cours",
     "metaDescription": "Page de détail du cours de Klowhub",
-    "metaSiteName": "Klowhub - Détail du cours"
+    "metaSiteName": "Klowhub - Détail du cours",
+    "afterCompletingCourse": "Après avoir terminé ce cours, vous serez capable de :",
+    "aboutCourse": "À propos de ce cours",
+    "whyLearnWith": "Pourquoi apprendre avec {creatorName}?",
+    "whoIsThisFor": "Pour qui est ce cours?",
+    "requirements": "Exigences",
+    "whatIncludes": "Ce qui est inclus"
   },
   "TermsAndConditions": {
     "metaTitle": "Klowhub - Conditions générales",

diff --git a/client/src/locales/it.json b/client/src/locales/it.json
@@ -116,7 +116,12 @@
   "CoursesWatch": {
     "metaTitle": "Klowhub - Guarda i Corsi",
     "metaDescription": "Pagina Guarda i Corsi di Klowhub",
-    "metaSiteName": "Klowhub - Guarda i Corsi"
+    "metaSiteName": "Klowhub - Guarda i Corsi",
+    "lesson": "Lezioni",
+    "consultation": "Consulenze",
+    "resource": "Risorse",
+    "noConsultations": "Non ci sono ancora consulenze",
+    "noResources": "Non ci sono risorse disponibili"
   },
   "Navbar": {
     "dashboardLink": "Pannello di controllo",
@@ -173,7 +178,8 @@
     "session": "Sessione",
     "filter": "Filtra",
     "sort": "Ordina per",
-    "search": "Cercare"
+    "search": "Cercare",
+    "share": "Condividere"
   },
   "NewCourse": {
     "metaTitle": "Klowhub - Crea un nuovo corso",
@@ -192,7 +198,13 @@
   "CourseDetail": {
     "metaTitle": "Klowhub - Dettagli del Corso",
     "metaDescription": "Klowhub - Pagina dei dettagli del corso",
-    "metaSiteName": "Klowhub - Dettagli del Corso"
+    "metaSiteName": "Klowhub - Dettagli del Corso",
+    "afterCompletingCourse": "Dopo aver completato questo corso, sarai in grado di:",
+    "aboutCourse": "Informazioni su questo corso",
+    "whyLearnWith": "Perché imparare con {creatorName}?",
+    "whoIsThisFor": "Per chi è questo corso?",
+    "requirements": "Requisiti",
+    "whatIncludes": "Cosa include"
   },
   "TermsAndConditions": {
     "metaTitle": "Klowhub - Termini e Condizioni",

diff --git a/client/src/locales/pt.json b/client/src/locales/pt.json
@@ -116,7 +116,12 @@
   "CoursesWatch": {
     "metaTitle": "Klowhub - Assistir Cursos",
     "metaDescription": "Página de Assistir Cursos do Klowhub",
-    "metaSiteName": "Klowhub - Assistir Cursos"
+    "metaSiteName": "Klowhub - Assistir Cursos",
+    "lesson": "Lições",
+    "consultation": "Consultas",
+    "resource": "Recursos",
+    "noConsultations": "Ainda não há consultas",
+    "noResources": "Não há recursos disponíveis"
   },
   "Navbar": {
     "dashboardLink": "Painel",
@@ -172,7 +177,8 @@
     "reviews": "Avaliação",
     "session": "Sessão",
     "filter": "Filtrar",
-    "sort": "Ordenar por"
+    "sort": "Ordenar por",
+    "share": "Compartilhar"
   },
   "NewCourse": {
     "metaTitle": "Klowhub - Criar um novo curso",
@@ -192,7 +198,13 @@
   "CourseDetail": {
     "metaTitle": "Klowhub - Detalhe do Curso",
     "metaDescription": "Página de Detalhes do Curso do Klowhub",
-    "metaSiteName": "Klowhub - Detalhe do Curso"
+    "metaSiteName": "Klowhub - Detalhe do Curso",
+    "afterCompletingCourse": "Depois de completar este curso, você será capaz de:",
+    "aboutCourse": "Sobre este curso",
+    "whyLearnWith": "Por que aprender com {creatorName}?",
+    "whoIsThisFor": "Para quem é este curso?",
+    "requirements": "Requisitos",
+    "whatIncludes": "O que inclui"
   },
   "TermsAndConditions": {
     "metaTitle": "Klowhub - Termos e Condições",