fixing dynamic expands

nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { useState } from "react";
 import { CalendarMonthModel } from "./calendarMonthUtils";
 import { DayOfWeek } from "@/models/local/localCourse";
 import Day from "./day/Day";
+import { Expandable } from "@/components/Expandable";
 
 export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   const weekInMilliseconds = 604_800_000;
@@ -10,33 +10,30 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
     new Date(month.year, month.month, 1) <
     new Date(Date.now() - weekInMilliseconds);
 
-  const [isCollapsed, setIsCollapsed] = useState(isInPast);
-
   const monthName = new Date(month.year, month.month - 1, 1).toLocaleString(
     "default",
     { month: "long" }
   );
-  const toggleCollapse = () => setIsCollapsed(!isCollapsed);
   const weekDaysList: DayOfWeek[] = Object.values(DayOfWeek);
 
   return (
     <>
-      <div className="flex justify-center">
-        <h3
-          className={
-            "text-2xl transition-all duration-500 " +
-            "hover:text-slate-50 underline hover:scale-105 `"
-          }
-          onClick={toggleCollapse}
-          role="button"
-        >
-          {monthName}
-        </h3>
-      </div>
-
-      <div
-        id={monthName}
-        className={"collapsible " + (isCollapsed ? "" : "expand")}
+      <Expandable
+        defaultExpanded={!isInPast}
+        ExpandableElement={({ setIsExpanded, isExpanded }) => (
+          <div className="flex justify-center">
+            <h3
+              className={
+                "text-2xl transition-all duration-500 " +
+                "hover:text-slate-50 underline hover:scale-105 `"
+              }
+              onClick={() => setIsExpanded((e) => !e)}
+              role="button"
+            >
+              {monthName}
+            </h3>
+          </div>
+        )}
       >
         <div className="grid grid-cols-7 text-center fw-bold">
           {weekDaysList.map((day) => (
@@ -49,7 +46,7 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
         {month.daysByWeek.map((week, weekIndex) => (
           <CalendarWeek key={weekIndex} week={week} monthNumber={month.month} />
         ))}
-      </div>
+      </Expandable>
     </>
   );
 };