implemented months as accordion

app/ui/MonthCard.tsx

@@ -0,0 +1,27 @@
+import { FC } from "react";
+import { formatYearMonth } from "../lib/format";
+import { YearMonth } from "../lib/db-types";
+import { formatCurrency } from "../lib/formatStrings";
+
+export interface MonthCardProps {
+    yearMonth: YearMonth,
+    children?: React.ReactNode,
+    monthlyExpense:number
+}
+
+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>

app/ui/MonthTitle.tsx

@@ -1,10 +0,0 @@
-import { FC } from "react";
-import { formatYearMonth } from "../lib/format";
-import { YearMonth } from "../lib/db-types";
-
-export interface MonthTitleProps {
-    yearMonth: YearMonth
-}
-
-export const MonthTitle:FC<MonthTitleProps> = ({ yearMonth }) =>
-<div className="divider text-2xl">{`${formatYearMonth(yearMonth)}`}</div>

app/ui/MonthlyExpensesCard.tsx

@@ -1,12 +0,0 @@
-import { FC } from "react";
-import { formatCurrency } from "../lib/formatStrings";
-
-export const MontlyExpensesCard:FC<{monthlyExpense:number}> = ({ monthlyExpense }) =>
-    monthlyExpense>0 ?
-    <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
-        <span className="card-body self-center">
-          <p>
-            Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
-          </p>
-        </span>
-    </div> : null