add generic layout for reuse

src/pages/resources/[id]/edit.tsx

@@ -1,6 +1,4 @@
 import { XCircleIcon } from "@heroicons/react/20/solid";
-import Footer from "~/components/Footer";
-import Header from "~/components/Header";
 import { AdminBarLayout } from "~/components/admin/ControlBar";
 import { AdminActionButton, AdminActionLink } from "~/components/admin/common";
 import Image from "next/image";
@@ -12,6 +10,7 @@ import { useState } from "react";
 import { useForm, type SubmitHandler } from "react-hook-form";
 import { api } from "~/utils/api";
 import { useRouter } from "next/router";
+import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
 
 const EditResourcePage = () => {
   const router = useRouter();
@@ -48,8 +47,7 @@ const EditResourcePage = () => {
   }
 
   return (
-    <>
-      <Header />
+    <HeaderFooterLayout>
       <AdminBarLayout
         actions={[
           <AdminActionButton
@@ -85,16 +83,15 @@ const EditResourcePage = () => {
           />,
         ]}
       >
-        <main className="mb-12">
+        <div className="mb-12">
           <ResourceForm
             methods={formMethods}
             error={serverError}
             resource={resource as ResourceUpdateInput}
           />
-        </main>
+        </div>
       </AdminBarLayout>
-      <Footer />
-    </>
+    </HeaderFooterLayout>
   );
 };
 

src/pages/resources/[id]/index.tsx

@@ -5,11 +5,10 @@ import { ResourceDescription, ResourceInfo } from "~/components/ResourceTable";
 import { type PlatformLink } from "@prisma/client";
 import Image from "next/image";
 import Link from "next/link";
-import Footer from "~/components/Footer";
-import Header from "~/components/Header";
 import { AdminBarLayout } from "~/components/admin/ControlBar";
 import { AdminActionLink } from "~/components/admin/common";
 import { useRouter } from "next/router";
+import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
 
 export const PlatformLinkButton = ({
   platformLink,
@@ -121,25 +120,21 @@ const ResourceViewPage = () => {
   };
 
   return (
-    <>
-      <div className="min-h-screen">
-        <Header />
-        <AdminBarLayout
-          actions={
-            <AdminActionLink
-              symbol={<PencilSquareIcon className="w-4" />}
-              label="Edit Page"
-              href={`${router.asPath}/edit`}
-            />
-          }
-        >
-          <main className="mb-12">
-            <ConditionalView />
-          </main>
-        </AdminBarLayout>
-        <Footer />
-      </div>
-    </>
+    <HeaderFooterLayout>
+      <AdminBarLayout
+        actions={
+          <AdminActionLink
+            symbol={<PencilSquareIcon className="w-4" />}
+            label="Edit Page"
+            href={`${router.asPath}/edit`}
+          />
+        }
+      >
+        <div className="mb-12">
+          <ConditionalView />
+        </div>
+      </AdminBarLayout>
+    </HeaderFooterLayout>
   );
 };
 

src/pages/resources/index.tsx

@@ -5,10 +5,9 @@ import { useRouter } from "next/router";
 import ResourceTable from "~/components/ResourceTable";
 import { api } from "~/utils/api";
 import { parseQueryData } from "~/utils/parseSearchForm";
-import Footer from "~/components/Footer";
-import Header from "~/components/Header";
 import { LoadingBarChart } from "~/components/LoadingBarChart";
 import { ErrorNotice } from "~/components/notice";
+import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
 
 const Resources = () => {
   const router = useRouter();
@@ -38,7 +37,7 @@ const Resources = () => {
 
     if (!resourceQuery.data || resourceQuery.isError) {
       return (
-        <div className="my-28">
+        <div className="my-10 sm:my-16 md:my-28">
           <ErrorNotice
             icon
             header="Unable to pull available resources. Please try again."
@@ -62,9 +61,8 @@ const Resources = () => {
   };
 
   return (
-    <>
-      <Header />
-      <main className="mx-auto my-6 max-w-6xl md:px-4">
+    <HeaderFooterLayout>
+      <div className="mb-12 mt-6 md:px-2">
         <div className="mb-2 flex flex-row justify-between p-2 print:hidden sm:mb-4 sm:p-4">
           <section className="space-y-2">
             <h1 className="text-3xl font-bold">All Resources</h1>
@@ -95,9 +93,8 @@ const Resources = () => {
           </section>
         </div>
         <ConditionalTable />
-      </main>
-      <Footer />
-    </>
+      </div>
+    </HeaderFooterLayout>
   );
 };