tracking active month via URL param

app/ui/MonthCard.tsx

@@ -1,27 +1,40 @@
+"use client";
+
 import { FC } from "react";
 import { formatYearMonth } from "../lib/format";
 import { YearMonth } from "../lib/db-types";
 import { formatCurrency } from "../lib/formatStrings";
+import { redirect, useParams, useRouter } from "next/navigation";
 
 export interface MonthCardProps {
     yearMonth: YearMonth,
     children?: React.ReactNode,
-    monthlyExpense:number
+    monthlyExpense:number,
+    expanded?:boolean
 }
 
-export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense }) =>
-<div className="collapse collapse-plus bg-base-200 my-1">
-  <input type="radio" name="my-accordion-3" /> 
-  <div className="collapse-title text-xl font-medium">
-    {`${formatYearMonth(yearMonth)}`}
-    {
-      monthlyExpense>0 ?
-        <p className="text-xs font-medium">
-          Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
-        </p> : null
-    }
-  </div>
-  <div className="collapse-content"> 
-    {children}
-  </div>
-</div>
+export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded }) => {
+
+  const router = useRouter();
+
+  // setting the `month` will activate the accordion belonging to that month
+  const handleChange = (event:any) => router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`)
+
+  return(
+    <div className="collapse collapse-plus bg-base-200 my-1">
+      <input type="radio" name="my-accordion-3" checked={expanded} onChange={handleChange} /> 
+      <div className="collapse-title text-xl font-medium">
+        {`${formatYearMonth(yearMonth)}`}
+        {
+          monthlyExpense>0 ?
+            <p className="text-xs font-medium">
+              Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
+            </p> : null
+        }
+      </div>
+      <div className="collapse-content"> 
+        {children}
+      </div>
+    </div>
+  )
+};