From fbf01ae5090208d0189ac04224aee02ae413c171 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Thu, 30 Jan 2025 20:11:41 +0000
Subject: [PATCH] Showing course name on module item on pages outside course
 page

---
 components/MaterialLists/ModuleList.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/MaterialLists/ModuleList.tsx b/components/MaterialLists/ModuleList.tsx
index bf8a5103..41c2f650 100644
--- a/components/MaterialLists/ModuleList.tsx
+++ b/components/MaterialLists/ModuleList.tsx
@@ -15,6 +15,16 @@ interface ModuleListProps {
   headingSize?: "HeadingTwo" | "HeadingFour"; // optional prop to determine the heading size
 }
 
+/**
+ * Lists all the modules according to a certain grouping.
+ * The modules items are clickable and redirect to the module page.
+ * The items display the module name and its parent course name.
+ *
+ * @param groupedMaterial List of grouped modules
+ * @param headingSize Optional prop to determine the heading size
+ * @returns List of grouped modules
+ * @author Maruf Bepary
+ */
 const ModuleList: React.FC<ModuleListProps> = ({
   groupedMaterial: groupedModules,
   headingSize = "HeadingTwo",
@@ -48,7 +58,16 @@ const ModuleList: React.FC<ModuleListProps> = ({
                     href={`${basePath}/${courseKey}/${moduleKey}`}
                     key={idx}
                   >
-                    <Tag hasHover>{moduleDatabaseMap[moduleKey].name}</Tag>
+                    <Tag hasHover>
+                      <div>{moduleDatabaseMap[moduleKey].name}</div>
+                      <div className="text-neutral-400 dark:text-red-200 italic text-sm">
+                        {
+                          courseDatabaseMap[
+                            moduleDatabaseMap[moduleKey].parentCourse
+                          ].name
+                        }
+                      </div>
+                    </Tag>
                   </Link>
                 </div>
               );