fix: adjust course material card

Author: mhenriette

public/locales/bg/common.json

@@ -122,6 +122,9 @@
   "communities.overview.challenge.learning.modules.included": "Включени образователни модули",
   "communities.overview.challenge.no.learning.modules": "Без включени образователни модули",
   "communities.overview.challenge.learning.title": "Следните учебни материали ще ви осигурят техническите умения, необходими за успешното справяне с предизвикателството.",
+  "communities.overview.challenge.course": "КУРС",
+  "communities.overview.challenge.course.learningModule": "{{count}} един учебен материал включен",
+  "communities.overview.challenge.course.learningModules": "{{count}} единични учебни материали включени",
   "communities.overview.challenge.learning.start": "започнете сега",
   "communities.overview.challenge.team.setup.title": "Създайте вашия екип",
   "communities.overview.challenge.team.setup.description": "Изберете от 1 до 3 члена, които да се присъединят към предизвикателството.",

public/locales/en/common.json

@@ -128,6 +128,9 @@
   "communities.overview.challenge.learning.modules.included": "Learning modules included",
   "communities.overview.challenge.no.learning.modules": "No learning modules included",
   "communities.overview.challenge.learning.title": "The following learning materials will equip you with the technical expertise required to successfully address the challenge.",
+  "communities.overview.challenge.course": "COURSE",
+  "communities.overview.challenge.course.learningModule": "{{count}} Single learning module included",
+  "communities.overview.challenge.course.learningModules": "{{count}} Single learning modules included",
   "communities.overview.challenge.learning.start": "Start now",
   "communities.overview.challenge.team.setup.title": "Form your team",
   "communities.overview.challenge.team.setup.description": "Select from 1 to 3 members to join you in the challenge.",

public/locales/es/common.json

@@ -127,6 +127,9 @@
   "communities.overview.challenge.learning.modules.included": "Módulos de aprendizaje incluidos",
   "communities.overview.challenge.no.learning.modules": "No se incluyen módulos de aprendizaje",
   "communities.overview.challenge.learning.title": "Los siguientes materiales de aprendizaje le proporcionarán la experiencia técnica necesaria para abordar con éxito el desafío.",
+  "communities.overview.challenge.course": "CURSO",
+  "communities.overview.challenge.course.learningModule": "{{count}} Módulo de aprendizaje único incluido",
+  "communities.overview.challenge.course.learningModules": "{{count}} Módulos de aprendizaje únicos incluidos",
   "communities.overview.challenge.learning.start": "Comenzar ahora",
   "communities.overview.challenge.team.setup.title": "Forma tu equipo",
   "communities.overview.challenge.team.setup.description": "Selecciona de 1 a 3 miembros para que se unan a ti en el desafío.",

public/locales/hr/common.json

@@ -175,6 +175,9 @@
   "communities.overview.challenge.learning.modules.included": "Uključeni moduli učenja",
   "communities.overview.challenge.no.learning.modules": "Nema uključenih modula učenja",
   "communities.overview.challenge.learning.title": "Sljedeći materijali za učenje opskrbit će vas tehničkim stručnostima potrebnim za uspješno rješavanje izazova.",
+  "communities.overview.challenge.course": "TEČAJ",
+  "communities.overview.challenge.course.learningModule": "{{count}} pojedini učeni materijal uključen",
+  "communities.overview.challenge.course.learningModules": "{{count}} pojedinih učeni materijala uključeni",
   "communities.overview.challenge.learning.start": "Počnite sada",
   "communities.overview.challenge.team.setup.title": "Sastavite svoj tim",
   "communities.overview.challenge.team.setup.description": "Odaberite između 1 do 3 člana koji će vam se pridružiti u izazovu.",

src/components/badges/durationBadge.tsx

@@ -3,7 +3,18 @@ import classNames from "classnames";
 import { useRouter } from "next/router";
 import React, { useMemo } from "react";
 
-export default function DurationBadge({ value, type = "gray" }: { value: number; type?: string }) {
+interface DuratetionBadgeProps{
+  value:number;
+  type?:string;
+}
+
+/**
+ * DurationBadge component
+ *
+ * @param {DuratetionBadgeProps} props - The props for the DurationBadge component.
+ * @returns {JSX.Element} The Learning component JSX element.
+ */
+export default function DurationBadge({ value, type = "gray" }: DuratetionBadgeProps) {
   const router = useRouter();
   const duration = useMemo(() => {
     return (value: number) => {
@@ -14,13 +25,13 @@ export default function DurationBadge({ value, type = "gray" }: { value: number;
     };
   }, [router.locale]);
   return (
-    <span
-      className={classNames("text-xxs uppercase font-semibold px-2 rounded-3xl inline-block text-gray-500", {
+    <div
+      className={classNames("text-xxs uppercase font-semibold px-2 rounded-3xl inline-block text-gray-500 text-nowrap", {
         "bg-gray-200": type === "gray",
         "border border-gray-200": type === "bordered",
       })}
     >
       {duration(value)}
-    </span>
+    </div>
   );
 }

src/components/badges/Badges.tsx renamed to src/components/badges/index.tsx

@@ -2,11 +2,11 @@ import ArrowButton from "@/components/ui/button/Arrow";
 import { Community } from "@/types/community";
 import { Challenge } from "@/types/course";
 import Link from "next/link";
-import Badges from "../../badges/Badges";
 import { useMemo } from "react";
 import { useTranslation } from "next-i18next";
 import Image from "next/image";
 import RewardCertificate from "./RewardCertificate";
+import Badges from "@/components/badges";
 
 /**
  * `ChallengeCard` is a function component that renders a card

src/components/cards/challenge/Challenge.tsx

@@ -4,51 +4,50 @@ import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import { useSelector } from "react-redux";
 import { IRootState } from "@/store";
-import Badges from "@/components/badges/Badges";
-import DurationBadge from "@/components/badges/durationBadge";
+import Badges from "@/components/badges";
+import DurationBadge from "@/components/badges/DurationBadge";
 
-/**
- * Props for the Learning component.
- */
-interface LearningProps {
+interface CourseMaterialProps {
   title: string;
   description: string;
   link: string;
   level: number;
   learningModulesCount: number;
-  duration: number
+  duration: number;
 }
 
 /**
- * Learning component.
+ * CourseMaterialProps component.
  *
- * @param {LearningProps} props - The props for the Learning component.
- * @returns {JSX.Element} The Learning component JSX element.
+ * @param {CourseMaterialProps} props - The props for the CourseMaterial component.
+ * @returns {JSX.Element} The CourseMaterial component JSX element.
  */
-export default function CourseCard({ title, description, link, level, learningModulesCount, duration}: LearningProps): JSX.Element {
+export default function CourseMaterial({ title, description, link, level, learningModulesCount, duration }: CourseMaterialProps): JSX.Element {
   const { t } = useTranslation();
-  const colors = useSelector((state: IRootState)=>state.ui.colors);
+  const colors = useSelector((state: IRootState) => state.ui.colors);
 
   return (
     <div className="flex flex-col gap-3 relative p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group text-gray-700 sm:p-8 border-solid border border-gray-200">
       <div className="flex flex-col w-full">
-        <div className="flex items-center justify-between mb-6">
+        <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-polygon" style={{ backgroundColor: colors?.primary }} />
             <span className="capitalize font-semibold text-[#4B5563] text-sm">COURSE</span>
           </div>
-          <div className="flex items-start gap-2">
-            <Badges courseLevel={level} />
+          <div className="flex items-center gap-2">
+            <Badges courseLevel={level} className="!mb-0" />
             <DurationBadge value={duration} type="bordered" />
           </div>
         </div>
         <div className="flex flex-col gap-6">
           <div className="text-lg font-medium leading-normal text-gray-900">{title}</div>
           <div className="text-sm font-normal text-gray-700 max-w-xxs">{description}</div>
           {learningModulesCount && (
-            <p className="text-sm pb-6 font-medium text-gray-400 border-b-2 border-gray-200 border-dotted">{`${learningModulesCount}  Learning ${
-              learningModulesCount === 1 ? "material" : "materials"
-            } included`}</p>
+            <p className="text-sm pb-6 font-medium text-gray-400 border-b-2 border-gray-200 border-dotted">
+              {t(learningModulesCount === 1 ? "communities.overview.challenge.course.learningModule" : "communities.overview.challenge.course.learningModules", {
+                count: learningModulesCount,
+              })}
+            </p>
           )}
         </div>
         <div className="bottom-0 mt-6">

src/components/cards/CourseCard.tsx renamed to src/components/cards/course/CourseMaterial.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Accordion from "@/components/ui/accordion/Accordion";
 import Section from "@/components/sections/communities/_partials/Section";
-import CourseCard from "@/components/cards/CourseCard";
+import CourseMaterial from "@/components/cards/course/CourseMaterial";
 import RelatedLearningCard from "@/components/cards/challenge/_partials/RelatedLearning";
 import { Course, LearningModule } from "@/types/course";
 import { Community } from "@/types/community";
@@ -25,9 +25,9 @@ export default function Learning({ courses, learningModules, community }: { cour
         content={
           <>
             <div className="text-base font-normal text-slate-700 py-6">{t("communities.overview.challenge.learning.title")}</div>
-            <div className={`grid grid-cols-1 gap-3 mb-3 ${courses.length > 1 && "md:grid-cols-2"}`}>
+            <div className={`grid grid-cols-1 gap-3 mb-3 ${courses?.length > 1 && "md:grid-cols-2"}`}>
               {courses?.map((course) => (
-                <CourseCard
+                <CourseMaterial
                   key={`learning-card-data-${course.id}`}
                   title={course.name}
                   description={course.description}