refactor: use updated course and learning materials cards

serapieTuyishime · serapieTuyishime · commit 39d05aa0b72b · 2024-07-24T18:31:21.000+02:00
diff --git a/src/components/cards/LearningModule.tsx b/src/components/cards/LearningModule.tsx
@@ -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>
diff --git a/src/components/cards/challenge/Challenge.tsx b/src/components/cards/challenge/Challenge.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}>
diff --git a/src/components/cards/course/CourseMaterial.tsx b/src/components/cards/course/CourseMaterial.tsx
diff --git a/src/components/cards/course/index.tsx b/src/components/cards/course/index.tsx
@@ -1,98 +1,63 @@
-import Reward from "@/components/cards/course/_partials/Reward";
-import Avatar from "@/components/ui/Avatar";
 import ArrowButton from "@/components/ui/button/Arrow";
-import { Community } from "@/types/community";
-import { Course } from "@/types/course";
-import Link from "next/link";
-import { ReactElement } from "react";
+import { useSelector } from "react-redux";
+import { IRootState } from "@/store"; import Link from "next/link";
+import Badges from "@/components/badges";
+import DurationBadge from "@/components/badges/DurationBadge";
 import { useTranslation } from "next-i18next";
 
-/**
- * Course card component props
- * @date 3/30/2023 - 1:19:07 PM
- *
- * @interface CourseCardProps
- * @typedef {CourseCardProps}
- */
+
 
 interface CourseCardProps {
-  course: Course;
-  community: Community;
+  title: string;
+  description: string;
+  link: string;
+  level: number;
+  learningModulesCount: number;
+  duration: number;
 }
 
 /**
- * Course card component
- * @date 3/30/2023 - 1:18:16 PM
+ * CourseMaterial component.
  *
- * @export
- * @param {CourseCardProps} {
-  course,
-  community,
-}
- * @returns {ReactElement}
+ * @param {CourseMaterial} { title, description, link, level, learningModulesCount, duration }.
+ * @returns {JSX.Element}
  */
-
-export default function CourseCard({ course, community }: CourseCardProps): ReactElement {
+export default function CourseCard({ title, description, link, level, learningModulesCount, duration }: CourseCardProps): JSX.Element {
   const { t } = useTranslation();
-  const path = `/communities/${community.slug}/courses/${course.slug}`;
-  const reward = course?.challenge?.rewards?.find((entity) => entity.type === "SUBMISSION");
+  const colors = useSelector((state: IRootState) => state.ui.colors);
 
   return (
-    <div className="flex flex-col sm:flex-row p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 bg-secondary rounded-3xl group text-gray-700 sm:p-7 mb-4 w-full border-solid border border-gray-200">
-      <div className="flex flex-col sm:pr-20 justify-between w-full sm:w-3/5 lg:w-2/3 pb-6 sm:pb-0">
-        <div className="flex flex-col">
-          <div className="text-lg font-medium leading-normal">{t(course.name)}</div>
-          {course.level && (
-            <div className="mt-2 text-xxs px-2.5 py-0.5 bg-gray-200 text-gray-500 rounded-3xl max-w-max tracking-wider uppercase font-medium">
-              {t(`course.challenge.level-${course.level}`)}
-            </div>
+    <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 className="text-sm mt-3 pb-2 max-w-xxs">{course.description}</div>
         </div>
-        <div className="hidden sm:block">
-          <Link href={path}>
+        <div className="bottom-0 mt-6">
+          <Link href={link}>
             <ArrowButton communityStyles={true} variant="outline-primary">
-              {t("course.challenge.button")}
+              {t("communities.overview.challenge.learning.start")}
             </ArrowButton>
           </Link>
         </div>
       </div>
-
-      {reward ? (
-        <div className="text-base text-left sm:flex flex-start flex flex-col pt-6 sm:pt-0 space-y-4 pb-5 sm:pl-7 sm:pb-10 w-full sm:w-2/5 lg:w-1/3 tracking-wider">
-          <Reward reward={reward} />
-          <div className="font-light text-sm max-w-xs pb-2 text-gray-700">
-            {t(reward.stable ? "course.challenge.reward.stable.description" : "course.challenge.reward.description", {
-              currency: "$",
-              amount: reward.amount,
-              token: reward.token,
-            })}
-          </div>
-        </div>
-      ) : (
-        <div className="text-base text-left sm:flex flex-start flex flex-col pt-6 sm:pt-0 space-y-4 pb-5 sm:pl-7 sm:pb-10 w-full sm:w-2/5 lg:w-1/3 tracking-wider">
-          <span className="text-xxs tracking-wider px-1 font-semibold uppercase text-gray-500">{t(`course.challenge.certificate`)}</span>
-          <Avatar
-            className="w-15 h-15 p-3 overflow-hidden"
-            icon={community.icon}
-            color={community.colors?.cover?.background || community.colors.primary}
-            size="extra"
-            shape="rounded-3xl"
-            user={null}
-          />
-          <div className="font-light text-sm max-w-xs pb-2 text-gray-700">
-            <p>{t("course.challenge.certificate.description")}</p>
-          </div>
-        </div>
-      )}
-
-      <div className="block sm:hidden pt-6">
-        <Link href={path}>
-          <ArrowButton communityStyles={true} variant="outline-primary">
-            {t("course.challenge.button")}
-          </ArrowButton>
-        </Link>
-      </div>
     </div>
   );
 }
diff --git a/src/components/sections/challenges/Learning.tsx b/src/components/sections/challenges/Learning.tsx
@@ -1,7 +1,7 @@
 import Accordion from "@/components/ui/accordion/Accordion";
 import Section from "@/components/sections/communities/_partials/Section";
 import { LearningModuleCard } from "@/components/cards/LearningModule";
-import CourseMaterial from "@/components/cards/course/CourseMaterial";
+import CourseCard from "@/components/cards/course";
 import { Course, LearningModule } from "@/types/course";
 import { Community } from "@/types/community";
 import { useTranslation } from "next-i18next";
@@ -24,7 +24,7 @@ export default function Learning({ courses, learningModules, community }: { cour
             <div className="text-base font-normal text-primary 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"}`}>
               {courses?.map((course) => (
-                <CourseMaterial
+                <CourseCard
                   key={`learning-card-data-${course.id}`}
                   title={course.name}
                   description={course.description}
diff --git a/src/components/sections/communities/overview/Courses.tsx b/src/components/sections/communities/overview/Courses.tsx
@@ -36,7 +36,15 @@ export function CoursesOverview(): ReactElement {
   return (
     <SectionWrapper title={`${t("communities.overview.courses.title")}`} description={`${t("communities.overview.courses.description")}`}>
       {courseList?.map((course: Course) => (
-        <CourseCard key={course.id} course={course} community={community as Community} />
+        <CourseCard
+          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}
+        />
       ))}
     </SectionWrapper>
   );
diff --git a/src/components/sections/communities/overview/LearningMaterials.tsx b/src/components/sections/communities/overview/LearningMaterials.tsx
@@ -1,6 +1,6 @@
 import CourseCard from "@/components/cards/course"
 import { useMultiSelector } from "@/hooks/useTypedSelector"
-import RelatedLearningCard from "@/components/cards/challenge/_partials/RelatedLearning";
+import { LearningModuleCard } from "@/components/cards/LearningModule";
 import { Course, LearningModule } from "@/types/course";
 import { Community } from "@/types/community";
 import Loader from "@/components/ui/Loader";
@@ -26,22 +26,29 @@ export default function LearningMaterialsOverview() {
 
     return (
         <>
-            <div className="md:hidden">
+            <div className="md:hidden my-8">
                 <div className="font-medium text-.5xl leading-snug">{t("communities.overview.learning-materials.title")}</div>
-                <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.learning-materials.description")} </div>
+                <div className="text-sm font-light lg:w-full lg:pr-7 pt-2">{t("communities.overview.learning-materials.description")} </div>
             </div>
-            <div className="grid gap-6">
+            <div className="grid gap-3 md:gap-6 mb-3 md:mb-6">
                 {courses?.map((course) => {
-                    return <CourseCard key={`learning-material-course-${course.id}`} course={course} community={community} />
+                    return <CourseCard
+                        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>
             <div className="grid md:grid-cols-2 gap-3 w-full">
                 {learningModules?.map((module) => {
-                    return <RelatedLearningCard
-                        key={`learning-material-material-${module.id}`}
-                        title={module.title}
-                        description={module.description}
-                        path={`/communities/${community.slug}`} />
+                    return <LearningModuleCard
+                        key={`related-learning-card-${module.id}`}
+                        data={module}
+                    />
                 })}
             </div>
         </>
diff --git a/src/components/sections/communities/overview/Wrapper.tsx b/src/components/sections/communities/overview/Wrapper.tsx
@@ -24,7 +24,7 @@ export default function Wrapper({ children, filter }: WrapperProps): JSX.Element
     <div className="relative">
       <MainHeaderSection />
       <Section>
-        <div className="w-full md:flex gap-36 mx-auto mt-14">
+        <div className="w-full md:flex gap-36 mx-auto mt-6 md:mt-17">
           <div className="hidden md:grid w-4/12">
             <CommunitySidebar />
             {filter}
diff --git a/src/components/sections/communities/overview/scoreboard/index.tsx b/src/components/sections/communities/overview/scoreboard/index.tsx
@@ -26,9 +26,9 @@ export default function ScoreboardOverview(): ReactElement {
 
   return (
     <>
-      <div className="md:hidden">
+      <div className="md:hidden my-8">
         <div className="font-medium text-.5xl leading-snug">{t("communities.overview.scoreboard.title")}</div>
-        <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.scoreboard.description")} </div>
+        <div className="text-sm font-light lg:w-full lg:pr-7 pt-2">{t("communities.overview.scoreboard.description")} </div>
       </div>
       {loading ? (
         <div className="h-full w-full grid">
diff --git a/src/pages/communities/[slug]/courses/[course_slug]/learning-modules/[id].tsx b/src/pages/communities/[slug]/courses/[course_slug]/learning-modules/[id].tsx
@@ -101,7 +101,7 @@ export default function LearningModulePage(props: LearningModulePageProps): Reac
             <LearningModuleSection learningModule={learningModule} />
             {isLastLearningModule ? (
               course.challenges && (
-                <div>
+                <div className="mb-5">
                   <div className="mt-6 mb-5">
                     <h2 className="font-medium text-.5xl text-gray-700 pb-3">{t("communities.challenge.title")}</h2>
                     <p className="text-lg">{t("communities.overview.learning-modules-challenge-introduction")}</p>
diff --git a/src/pages/communities/[slug]/index.tsx b/src/pages/communities/[slug]/index.tsx
@@ -37,12 +37,14 @@ export default function Slug(props: {
       <CommunityWrapper>
         <div className="md:hidden">
           <div className="font-medium text-.5xl leading-snug">{t("communities.overview.challenges.title")}</div>
-          <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.challenges.description")} </div>
+          <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-8 md:mb-0">{t("communities.overview.challenges.description")} </div>
         </div>
-        {challenges.map((challenge) => (
-          <ChallengeCard key={challenge.id} data={challenge} community={community} />
-        ))}
-        <div className="md:hidden w-full grid mt-16 gap-16">
+        <div className="grid gap-6">
+          {challenges.map((challenge) => (
+            <ChallengeCard key={challenge.id} data={challenge} community={community} />
+          ))}
+        </div>
+        <div className="md:hidden w-full grid">
           <LearningMaterialsOverview />
           <Scoreboard />
         </div>
