header & footer

app/page.tsx

@@ -10,6 +10,8 @@ import { YearMonth } from './lib/db-types';
 import { formatYearMonth } from './lib/format';
 import { FC } from 'react';
 import Pagination from './ui/Pagination';
+import { PageHeader } from './ui/PageHeader';
+import { Main } from './ui/Main';
 
 const getNextYearMonth = (yearMonth:YearMonth) => {
   const {year, month} = yearMonth;
@@ -62,7 +64,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
   let monthlyExpense = 0;
 
  return (
-    <main className="flex min-h-screen flex-col p-6 bg-base-300">
+    <Main>
         {
           // if this is the latest year, show the add month button
           currentYear === latestYear &&
@@ -116,8 +118,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
         <div className="mt-5 flex w-full justify-center">
           <Pagination availableYears={availableYears} />
         </div>
-        <PageFooter />
-    </main>
+    </Main>
   );
 }