expanding modules, items displaying

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -1,37 +1,62 @@
+import { IModuleItem } from "@/models/local/IModuleItem";
 import { LocalModule } from "@/models/local/localModules";
-import React from "react";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import React, { useState } from "react";
 
 export default function ExpandableModule({ module }: { module: LocalModule }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const moduleItems: {
+    type: "assignment" | "quiz" | "page";
+    item: IModuleItem;
+  }[] = module.assignments
+    .map(
+      (
+        a
+      ): {
+        type: "assignment" | "quiz" | "page";
+        item: IModuleItem;
+      } => ({
+        type: "assignment",
+        item: a,
+      })
+    )
+    .concat(module.quizzes.map((q) => ({ type: "quiz", item: q })))
+    .concat(module.pages.map((p) => ({ type: "page", item: p })))
+    .sort(
+      (a, b) =>
+        getDateFromStringOrThrow(
+          a.item.dueAt,
+          "item due date in expandable module"
+        ).getTime() -
+        getDateFromStringOrThrow(
+          b.item.dueAt,
+          "item due date in expandable module"
+        ).getTime()
+    );
+
   return (
-    <>
-      <section className="">
-        <label>
-          <div
-            className="
-            max-h-14 max-w-xs
-            overflow-hidden 
-            rounded-lg
-            bg-slate-800 
-            px-4 py-0 mb-3
-            transition-all duration-500 
-            peer-checked/showLabel:max-h-screen
-          "
-          >
-            <div className="flex h-14 cursor-pointer items-center font-bold">
-              <input
-                className="peer/showLabel absolute scale-0"
-                type="checkbox"
-              />
-              {module.name}
-            </div>
-            <hr />
-            <p className="mb-2">
-              crafted a sleek collapsible panel using Tailwind CSS without the
-              need for JavaScript. Impressive! 😎
-            </p>
-          </div>
-        </label>
-      </section>
-    </>
+    <div className="bg-slate-800 rounded-lg p-3 border border-slate-600 mb-3">
+      <div
+        className="font-bold "
+        role="button"
+        onClick={() => setExpanded((e) => !e)}
+      >
+        {module.name}
+      </div>
+      <div
+        className={
+          `
+          overflow-hidden 
+           transition-all duration-1000 ease-in
+          ` + (expanded ? " max-h-[30vh]" : " max-h-0")
+        }
+      >
+        <hr />
+        {moduleItems.map(({ type, item }) => (
+          <div key={item.name}>{item.name}</div>
+        ))}
+      </div>
+    </div>
   );
 }

nextjs/src/app/course/[courseName]/page.tsx

@@ -20,7 +20,7 @@ export default async function CoursePage({
             <div className="flex-1 min-h-0">
               <CourseCalendar />
             </div>
-            <div className="m-5">
+            <div className="w-96 p-3">
               <ModuleList />
             </div>
           </div>