refactor: add translation for the course card title

Author: serapieTuyishime

src/components/cards/LearningModule.tsx

@@ -24,7 +24,7 @@ export function LearningModuleCard({ data }: { data: LearningModule }): JSX.Elem
   })
 
   const level = useMemo(() => {
-    const value = challenge?.level;
+    const value = data?.level || challenge?.level;
     return t((value === 0 || value === 1) ? "course.challenge.level-0" : "course.challenge.level-2");
   }, [challenge?.level]);
 

src/components/cards/course/index.tsx

@@ -1,9 +1,10 @@
 import ArrowButton from "@/components/ui/button/Arrow";
-import { useSelector } from "react-redux";
-import { IRootState } from "@/store"; import Link from "next/link";
+import { IRootState } from "@/store";
+import Link from "next/link";
 import Badges from "@/components/badges";
 import { DurationBadge } from "@/components/badges/Duration";
 import { useTranslation } from "next-i18next";
+import { useSelector } from "@/hooks/useTypedSelector";
 
 
 
@@ -32,7 +33,9 @@ export default function CourseCard({ title, description, link, level, learningMo
         <div className="flex items-center justify-between mb-6 flex-wrap gap-2">
           <div className="flex gap-2 items-center">
             <div className="h-5.5 w-5.5 rounded-sm clip-hexagon" style={{ backgroundColor: colors?.primary }} />
-            <span className="capitalize font-semibold text-[#4B5563] text-sm">COURSE</span>
+            <span className="capitalize font-semibold text-[#4B5563] text-sm">
+              {t('communities.overview.challenge.course')}
+            </span>
           </div>
           <div className="flex items-center gap-2">
             <Badges courseLevel={level} className="!mb-0" />

src/types/course.d.ts

@@ -174,7 +174,8 @@ export type LearningModule = {
   order: number;
   course: string;
   interactiveModules: InteractiveModule[];
-  courses: Course[]
+  courses: Course[],
+  level?: number,
 };
 
 export type InteractiveModule = {