Merge branch 'dev' into ft/learning-module-card

Author: serapieTuyishime

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

@@ -176,6 +176,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

@@ -0,0 +1,27 @@
+import DateManager from "@/utilities/DateManager";
+import classNames from "classnames";
+import { useRouter } from "next/router";
+import React, { useCallback } from "react";
+
+interface DurationBadgeProps {
+  value: number;
+  type?: string;
+}
+
+export default function DurationBadge({ value, type = "gray" }: DurationBadgeProps) {
+  const router = useRouter();
+  const getDuration = useCallback((value: number, locale: string) => {
+    if (!value) return 0;
+    return DateManager.humanize(value, locale);
+  }, []);
+  return (
+    <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",
+      })}
+    >
+      {getDuration(value, router.locale as string)}
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
 import Tag from "@/components/ui/Tag";
 import { Challenge } from "@/types/course";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
+import { useTranslation } from "next-i18next";
 
 /**
  * this component is for the badges indicating if the course has a team challenge and the course level
@@ -13,23 +13,22 @@ import { useTranslation } from "react-i18next";
  * @returns {*}
  */
 interface BadgeProps {
-  challenge: Challenge;
+  challenge?: Challenge;
   className?: string;
+  courseLevel?: number;
 }
-export default function Badges({ challenge, className }: BadgeProps) {
+export default function Badges({ challenge, className, courseLevel }: BadgeProps) {
   const { t } = useTranslation();
-  const [challengeLevel, setChallengeLevel] = useState("");
 
-  useEffect(() => {
-    if (challenge.level === 0 || challenge.level === 1) return setChallengeLevel("course.challenge.level-0");
-    return setChallengeLevel("course.challenge.level-2");
-  }, [challenge.level]);
-
-  if (!challenge?.level && !challenge?.isTeamChallenge) return <></>;
+  const level = useMemo(() => {
+    const value = challenge?.level || courseLevel;
+    return (value === 0 || value === 1) ? "course.challenge.level-0" : "course.challenge.level-2";
+  }, [challenge?.level, courseLevel]);
 
+  if (!level && !challenge?.isTeamChallenge) return <></>;
   return (
     <div className={`uppercase flex flex-wrap gap-2 mb-3 ${className}`}>
-      {challenge?.level && <Tag>{t(challengeLevel)}</Tag>}
+      {level && <Tag>{t(level)}</Tag>}
       {challenge?.isTeamChallenge && <Tag type="light">{challenge?.isHackathon ? "Hackathon" : "Team"} challenge</Tag>}
     </div>
   );

src/components/cards/challenge/Challenge.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";
 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/_partials/Learning.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import ArrowButton from "@/components/ui/button/Arrow";
+import Link from "next/link";
+import { useTranslation } from "next-i18next";
+import { useSelector } from "react-redux";
+import { IRootState } from "@/store";
+import Badges from "@/components/badges";
+import DurationBadge from "@/components/badges/DurationBadge";
+
+interface CourseMaterialProps {
+  title: string;
+  description: string;
+  link: string;
+  level: number;
+  learningModulesCount: number;
+  duration: number;
+}
+
+/**
+ * CourseMaterial component.
+ *
+ * @param {CourseMaterial} { title, description, link, level, learningModulesCount, duration }.
+ * @returns {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);
+
+  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 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>
+          </div>
+          <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">
+              {t(learningModulesCount === 1 ? "communities.overview.challenge.course.learningModule" : "communities.overview.challenge.course.learningModules", {
+                count: learningModulesCount,
+              })}
+            </p>
+          )}
+        </div>
+        <div className="bottom-0 mt-6">
+          <Link href={link}>
+            <ArrowButton communityStyles={true} variant="outline-primary">
+              {t("communities.overview.challenge.learning.start")}
+            </ArrowButton>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/cards/course/CourseMaterial.tsx

@@ -1,7 +1,7 @@
 import Accordion from "@/components/ui/accordion/Accordion";
 import Section from "@/components/sections/communities/_partials/Section";
-import LearningCard from "@/components/cards/challenge/_partials/Learning";
 import { LearningModuleCard } from "@/components/cards/LearningModule";
+import CourseMaterial from "@/components/cards/course/CourseMaterial";
 import { Course, LearningModule } from "@/types/course";
 import { Community } from "@/types/community";
 import { useTranslation } from "next-i18next";
@@ -22,13 +22,16 @@ export default function Learning({ courses, learningModules, community }: { cour
         content={
           <>
             <div className="text-base font-normal text-primary py-6">{t("communities.overview.challenge.learning.title")}</div>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
+            <div className={`grid grid-cols-1 gap-3 mb-3 ${courses?.length > 1 && "md:grid-cols-2"}`}>
               {courses?.map((course) => (
-                <LearningCard
+                <CourseMaterial
                   key={`learning-card-data-${course.id}`}
                   title={course.name}
                   description={course.description}
                   link={`/communities/${community.slug}/courses/${course.slug}`}
+                  duration={course.duration}
+                  level={course.level}
+                  learningModulesCount={course.learningModules?.length}
                 />
               ))}
             </div>