refactor: use durationbadge instead of durationCard

Author: serapieTuyishime

src/components/badges/Duration.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 
-export const DurationCard = ({ value, type = "gray" }: { value: number, type?: string }) => {
+export const DurationBadge = ({ value, type = "gray" }: { value: number, type?: string }) => {
     const router = useRouter();
     const duration = useMemo(() => {
         if (!value) {

src/components/cards/Learning.tsx

@@ -1,7 +1,7 @@
 import useNavigation from "@/hooks/useNavigation";
 import { useRouter } from "next/router";
 import { ReactElement } from "react";
-import { DurationCard } from "../badges/Duration";
+import { DurationBadge } from "../badges/Duration";
 
 /**
  * LearningModule interface
@@ -50,7 +50,7 @@ export default function Learning({ learningModule }: LearningProps): ReactElemen
       <div onClick={navigate} className="flex flex-col">
         <div className="w-full">
           <h4 className="font-medium block text-xl mb-4">{learningModule.title}</h4>
-          {learningModule.duration && <DurationCard type="bordered" value={learningModule.duration} />}
+          {learningModule.duration && <DurationBadge type="bordered" value={learningModule.duration} />}
         </div>
         {learningModule.description && (
           <span className="text-sm mt-4 rounded-3xl">

src/components/cards/LearningModule.tsx

@@ -3,7 +3,7 @@ import ArrowButton from "@/components/ui/button/Arrow";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import Tag from "../ui/Tag";
-import { DurationCard } from "@/components/badges/Duration";
+import { DurationBadge } from "@/components/badges/Duration";
 import { useMultiSelector } from "@/hooks/useTypedSelector";
 import { IRootState } from "@/store";
 import { LearningModule } from "@/types/course";
@@ -39,7 +39,7 @@ export function LearningModuleCard({ data }: { data: LearningModule }): JSX.Elem
         </div>
         <div className="gap-2 flex items-center">
           {challenge.level && <Tag className="uppercase">{level}</Tag>}
-          <DurationCard value={data.duration} type="bordered" />
+          <DurationBadge value={data.duration} type="bordered" />
         </div>
       </div>