41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
"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,
|
|
expanded?:boolean
|
|
}
|
|
|
|
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>
|
|
)
|
|
};
|