add generic layout for reuse

src/components/notice.tsx

@@ -12,18 +12,20 @@ export const ErrorNotice = ({
   return (
     <>
       {header ? (
-        <div className="mx-auto w-fit rounded-xl border border-red-300 bg-red-100 px-4 py-4 text-center font-semibold text-red-600">
+        <div className="mx-auto w-fit px-2">
-          {icon ? (
+          <div className="rounded-xl border border-red-300 bg-red-100 px-4 py-4 text-center font-semibold text-red-600">
-            <div className="mx-auto grid place-items-center">
+            {icon ? (
-              <ExclamationTriangleIcon className="h-10 w-10" />
+              <div className="mx-auto grid place-items-center">
-            </div>
+                <ExclamationTriangleIcon className="h-10 w-10" />
-          ) : undefined}
+              </div>
-          <span className="text-lg font-semibold text-red-500">{header}</span>
+            ) : undefined}
-          {body ? (
+            <span className="text-lg font-semibold text-red-500">{header}</span>
-            <p className="mx-8 my-2 text-sm font-normal text-stone-600">
+            {body ? (
-              {body}
+              <p className="mx-8 my-2 text-sm font-normal text-stone-600">
-            </p>
+                {body}
-          ) : undefined}
+              </p>
+            ) : undefined}
+          </div>
         </div>
       ) : undefined}
     </>

src/layouts/HeaderFooterLayout.tsx

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import Footer from "~/components/Footer";
+import Header from "~/components/Header";
+
+export const HeaderFooterLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="flex h-full min-h-screen flex-col">
+      <Header />
+      <main className="mx-auto w-full max-w-6xl grow">{children}</main>
+      <Footer />
+    </div>
+  );
+};

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 (
-    <>
+    <HeaderFooterLayout>
-      <Header />
       <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 (
-    <>
+    <HeaderFooterLayout>
-      <div className="min-h-screen">
+      <AdminBarLayout
-        <Header />
+        actions={
-        <AdminBarLayout
+          <AdminActionLink
-          actions={
+            symbol={<PencilSquareIcon className="w-4" />}
-            <AdminActionLink
+            label="Edit Page"
-              symbol={<PencilSquareIcon className="w-4" />}
+            href={`${router.asPath}/edit`}
-              label="Edit Page"
+          />
-              href={`${router.asPath}/edit`}
+        }
-            />
+      >
-          }
+        <div className="mb-12">
-        >
+          <ConditionalView />
-          <main className="mb-12">
+        </div>
-            <ConditionalView />
+      </AdminBarLayout>
-          </main>
+    </HeaderFooterLayout>
-        </AdminBarLayout>
-        <Footer />
-      </div>
-    </>
   );
 };
 

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 (
-    <>
+    <HeaderFooterLayout>
-      <Header />
+      <div className="mb-12 mt-6 md:px-2">
-      <main className="mx-auto my-6 max-w-6xl md:px-4">
         <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>
+      </div>
-      <Footer />
+    </HeaderFooterLayout>
-    </>
   );
 };