feat: add course card design

Author: mhenriette

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

@@ -13,23 +13,26 @@ 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("");
 
+  const level = challenge?.level || courseLevel;
+
   useEffect(() => {
-    if (challenge.level === 0 || challenge.level === 1) return setChallengeLevel("course.challenge.level-0");
+    if (level === 0 || level === 1) return setChallengeLevel("course.challenge.level-0");
     return setChallengeLevel("course.challenge.level-2");
-  }, [challenge.level]);
+  }, [level]);
 
-  if (!challenge?.level && !challenge?.isTeamChallenge) return <></>;
+  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(challengeLevel)}</Tag>}
       {challenge?.isTeamChallenge && <Tag type="light">{challenge?.isHackathon ? "Hackathon" : "Team"} challenge</Tag>}
     </div>
   );

src/components/badges/durationBadge.tsx

@@ -0,0 +1,26 @@
+import DateManager from "@/utilities/DateManager";
+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 }) {
+  const router = useRouter();
+  const duration = useMemo(() => {
+    return (value: number) => {
+      if (!value) {
+        return 0;
+      }
+      return DateManager.humanize(value, router.locale as string);
+    };
+  }, [router.locale]);
+  return (
+    <span
+      className={classNames("text-xxs uppercase font-semibold px-2 rounded-3xl inline-block text-gray-500", {
+        "bg-gray-200": type === "gray",
+        "border border-gray-200": type === "bordered",
+      })}
+    >
+      {duration(value)}
+    </span>
+  );
+}

src/components/cards/CourseCard.tsx

@@ -0,0 +1,64 @@
+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/Badges";
+import DurationBadge from "@/components/badges/durationBadge";
+
+/**
+ * Props for the Learning component.
+ */
+interface LearningProps {
+  title: string;
+  description: string;
+  link: string;
+  level: number;
+  learningModulesCount: number;
+  duration: number
+}
+
+/**
+ * Learning component.
+ *
+ * @param {LearningProps} props - The props for the Learning component.
+ * @returns {JSX.Element} The Learning component JSX element.
+ */
+export default function CourseCard({ title, description, link, level, learningModulesCount, duration}: LearningProps): 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">
+          <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} />
+            <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>
+          )}
+        </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/challenge/Challenge.tsx

@@ -2,7 +2,7 @@ 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 Badges from "../../badges/Badges";
 import { useMemo } from "react";
 import { useTranslation } from "next-i18next";
 import Image from "next/image";

src/components/cards/challenge/_partials/Learning.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 LearningCard from "@/components/cards/challenge/_partials/Learning";
+import CourseCard from "@/components/cards/CourseCard";
 import RelatedLearningCard from "@/components/cards/challenge/_partials/RelatedLearning";
 import { Course, LearningModule } from "@/types/course";
 import { Community } from "@/types/community";
@@ -25,13 +25,16 @@ 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 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
+                <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>

src/components/sections/challenges/Learning.tsx

@@ -130,6 +130,9 @@ button,
 .floating-input > input::placeholder {
   color: transparent;
 }
+.clip-polygon {
+       clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+   }
 
 .floating-input > input:focus,
 .floating-input > input:not(:placeholder-shown) {