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>