Merge pull request #1259 from dacadeorg/ft/learning-materials-page

feat: add learning materials page

Author: musayann

__tests__/components/ui/MetaData.test.tsx

@@ -13,6 +13,12 @@ describe("MetaData", () => {
     expect(metaTags).toHaveLength(expectedMetaTags.length);
   });
 
+  it("should render the title when applicable", () => {
+    render(<MetaData description={description} title="Any title" />);
+    const metatitle = screen.getByTestId("page-title");
+    expect(metatitle).toHaveTextContent("Any title");
+  })
+
   it("should render the correct content in the meta tags", () => {
     render(<MetaData description={description} />);
     const mockMetas = getMetadataDescription(description);

public/locales/bg/common.json

@@ -90,7 +90,10 @@
   "page.protocols.contact.title.2": "Business Development",
   "page.protocols.contact.email.2": "[email protected]",
   "communities.overview.challenges.title": "Предизвикателства",
-  "communities.overview.challenges.description": "В курсовете на тази общност ще имате възможност да научите за нови технологии, да решавате предизвикателства, да получавате обратна връзка и да печелите награди.",
+  "communities.overview.challenges.description": "В предизвикателствата можете да се справите с практически задачи, да получите конструктивна обратна връзка и да спечелите награди за постиженията си.",
+  "communities.overview.learning-materials.title": "учебни материали",
+
+  "communities.overview.learning-materials.description": "В учебните материали можете да изследвате разнообразие от курсове и кратки модули, за да научите за нови технологии и да подобрите уменията си.",
   "communities.overview.challenge": "Creative Challenge",
   "communities.overview.chapter": "Chapter Overview",
   "communities.overview.learning-modules": "Learning Modules",
@@ -179,6 +182,7 @@
   "communities.navigation.challenge.overview": "Описание",
   "communities.navigation.submissions": "Заявки",
   "communities.navigation.scoreboard": "Scoreboard",
+  "communities.navigation.learning-materials": "учебни материали",
   "communities.navigation.courses": "Challenges",
   "communities.navigation.language.text": "This course is available in multiple languages",
   "communities.navigation.language.eng": "English",

public/locales/en/common.json

@@ -113,7 +113,9 @@
   "communities.submission": "Submission",
   "communities.challenge.title": "Challenge",
   "communities.overview.challenges.title": "Challenges",
-  "communities.overview.challenges.description": "In the courses of this community, you will be able to learn about new technologies, solve challenges, get feedback, and earn bounties.",
+  "communities.overview.challenges.description": "In challenges, you can tackle practical tasks, receive constructive feedback, and earn bounties for your achievements.",
+  "communities.overview.learning-materials.title": "Learning materials",
+  "communities.overview.learning-materials.description": "In the learning materials, you can explore a variety of courses and short modules to learn about new technologies and enhance your skills.",
   "communities.overview.challenge.title": "Already ready to complete the challenge?",
   "communities.overview.challenge.rewards": " Rewards",
   "communities.overview.challenge.certificate": "Certificate",
@@ -177,6 +179,7 @@
   "communities.navigation.learning-modules": "Learning Modules",
   "communities.navigation.bounties": "Bounties",
   "communities.navigation.challenge": "Challenge",
+  "communities.navigation.learning-materials": "Learning materials",
   "communities.navigation.challenge.overview": "Description",
   "communities.navigation.submissions": "Submissions",
   "communities.navigation.scoreboard": "Scoreboard",

public/locales/es/common.json

@@ -113,7 +113,9 @@
   "communities.submission": "Envío",
   "communities.challenge.title": "Reto",
   "communities.overview.challenges.title": "Desafíos",
-  "communities.overview.challenges.description": "En los cursos de esta comunidad, podrás aprender sobre nuevas tecnologías, resolver desafíos, recibir retroalimentación y ganar recompensas.",
+  "communities.overview.challenges.description": "En los desafíos, puedes abordar tareas prácticas, recibir retroalimentación constructiva y ganar recompensas por tus logros.",
+  "communities.overview.learning-materials.title": "materiales de aprendizaje",
+  "communities.overview.learning-materials.description": "En los materiales de aprendizaje, puedes explorar una variedad de cursos y módulos cortos para aprender sobre nuevas tecnologías y mejorar tus habilidades.",
   "communities.overview.challenge.rewards": "Recompensas",
   "communities.overview.challenge.certificate": "Certificate",
   "communities.overview.challenge.subtitle": "Al completar con éxito",
@@ -180,6 +182,7 @@
   "communities.navigation.learning-modules": "Módulos de Aprendizaje",
   "communities.navigation.bounties": "Premios",
   "communities.navigation.challenge": "Reto",
+  "communities.navigation.learning-materials": " materiales de aprendizaje",
   "communities.navigation.challenge.overview": "Descripción",
   "communities.navigation.submissions": "Propuestas",
   "communities.navigation.scoreboard": "Tabla de Resultados",

public/locales/hr/common.json

@@ -90,7 +90,9 @@
   "page.protocols.contact.title.2": "Business Development",
   "page.protocols.contact.email.2": "[email protected]",
   "communities.overview.challenges.title": "Izazovi",
-  "communities.overview.challenges.description": "Kroz tečajeve ove zajednice, moći ćete učiti o novim tehnologijama, rješavati izazove, dobivati povratne informacije i zarađivati nagrade.",
+  "communities.overview.learning-materials.title": "nastavni materijali",
+  "communities.overview.challenges.description": "U izazovima možete rješavati praktične zadatke, dobivati konstruktivne povratne informacije i zarađivati nagrade za svoja postignuća.",
+  "communities.overview.learning-materials.description": "U nastavnim materijalima možete istraživati različite tečajeve i kratke module kako biste naučili o novim tehnologijama i unaprijedili svoje vještine.",
   "communities.overview.challenge": "Kreativni izazov",
   "communities.overview.chapter": "Chapter Overview",
   "communities.overview.learning-modules": "Moduli učenja",
@@ -153,6 +155,7 @@
   "communities.navigation.submissions": "Prijave",
   "communities.navigation.scoreboard": "Scoreboard",
   "communities.navigation.courses": "Izazov",
+  "communities.navigation.learning-materials": "nastavni materijali",
   "communities.navigation.language.text": "This course is available in multiple languages",
   "communities.navigation.language.eng": "English",
   "communities.navigation.language.es": "Spanish",

src/components/badges/Duration.tsx

@@ -3,7 +3,12 @@ import classNames from "classnames";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 
-export const DurationBadge = ({ value, type = "gray" }: { value: number, type?: string }) => {
+interface DurationBadgeProps {
+    value: number;
+    type?: string;
+}
+
+export const DurationBadge = ({ value, type = "gray" }: DurationBadgeProps) => {
     const router = useRouter();
     const duration = useMemo(() => {
         if (!value) {
@@ -14,7 +19,7 @@ export const DurationBadge = ({ value, type = "gray" }: { value: number, type?:
     }, [router.locale, value]);
 
     return (
-        <span className={classNames("text-xxs uppercase font-semibold px-2 rounded-3xl inline-block text-gray-500",
+        <span 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"

src/components/badges/DurationBadge.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]);
 
@@ -38,7 +38,7 @@ export function LearningModuleCard({ data }: { data: LearningModule }): JSX.Elem
           <span className="uppercase font-semibold">{t("communities.card.module")}</span>
         </div>
         <div className="gap-2 flex items-center">
-          {challenge.level && <Tag className="uppercase">{level}</Tag>}
+          {challenge?.level && <Tag className="uppercase">{level}</Tag>}
           <DurationBadge value={data.duration} type="bordered" />
         </div>
       </div>

src/components/cards/LearningModule.tsx

@@ -33,7 +33,7 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
 
 
   return (
-    <div className="w-full flex flex-col sm:flex-row  md:flex-col lg:flex-row  border-solid border border-primary bg-secondary rounded-3xl mb-5 group text-secondary">
+    <div className="w-full flex flex-col sm:flex-row  md:flex-col lg:flex-row  border-solid border border-primary bg-secondary rounded-3xl group text-secondary">
       <div className="border-solid border -m-px border-primary bg-primary rounded-3xl sm:p-8 sm:pb-6 p-6 sm:w-2/3 md:w-auto lg:w-2/3">
         <div className="flex flex-col mb-1">
           <div className="lg:pr-20">
@@ -49,9 +49,8 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
           </div>
           <div className="divide-y-2 divide-gray-200 divide-dotted flex flex-col mt-8">
             {learningMaterialsCount && (
-              <p className="pb-3 md:pb-4 text-sm font-medium text-tertiary">{`${learningMaterialsCount}  Learning ${
-                learningMaterialsCount === 1 ? "material" : "materials"
-              } included`}</p>
+              <p className="pb-3 md:pb-4 text-sm font-medium text-tertiary">{`${learningMaterialsCount}  Learning ${learningMaterialsCount === 1 ? "material" : "materials"
+                } included`}</p>
             )}
             <div className="lg:flex lg:flex-row flex-col justify-between pt-3 md:pt-4 items-center">
               <Link href={link}>