From 2180d798d0075f33b3d2f1fa151a91594da6b77a Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Thu, 24 Aug 2023 13:30:09 -0500
Subject: [PATCH] add generic layout for reuse

---
 src/components/notice.tsx          | 26 +++++++++++----------
 src/layouts/HeaderFooterLayout.tsx | 13 +++++++++++
 src/pages/resources/[id]/edit.tsx  | 13 ++++-------
 src/pages/resources/[id]/index.tsx | 37 +++++++++++++-----------------
 src/pages/resources/index.tsx      | 15 +++++-------
 5 files changed, 54 insertions(+), 50 deletions(-)
 create mode 100644 src/layouts/HeaderFooterLayout.tsx

diff --git a/src/components/notice.tsx b/src/components/notice.tsx
index 5bd5d70..8b7ee5d 100644
--- a/src/components/notice.tsx
+++ b/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">
-          {icon ? (
-            <div className="mx-auto grid place-items-center">
-              <ExclamationTriangleIcon className="h-10 w-10" />
-            </div>
-          ) : undefined}
-          <span className="text-lg font-semibold text-red-500">{header}</span>
-          {body ? (
-            <p className="mx-8 my-2 text-sm font-normal text-stone-600">
-              {body}
-            </p>
-          ) : undefined}
+        <div className="mx-auto w-fit px-2">
+          <div className="rounded-xl border border-red-300 bg-red-100 px-4 py-4 text-center font-semibold text-red-600">
+            {icon ? (
+              <div className="mx-auto grid place-items-center">
+                <ExclamationTriangleIcon className="h-10 w-10" />
+              </div>
+            ) : undefined}
+            <span className="text-lg font-semibold text-red-500">{header}</span>
+            {body ? (
+              <p className="mx-8 my-2 text-sm font-normal text-stone-600">
+                {body}
+              </p>
+            ) : undefined}
+          </div>
         </div>
       ) : undefined}
     </>
diff --git a/src/layouts/HeaderFooterLayout.tsx b/src/layouts/HeaderFooterLayout.tsx
new file mode 100644
index 0000000..24dd96a
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/pages/resources/[id]/edit.tsx b/src/pages/resources/[id]/edit.tsx
index 9adaf44..7c9b421 100644
--- a/src/pages/resources/[id]/edit.tsx
+++ b/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>
   );
 };
 
diff --git a/src/pages/resources/[id]/index.tsx b/src/pages/resources/[id]/index.tsx
index 9fe28f8..d3129e0 100644
--- a/src/pages/resources/[id]/index.tsx
+++ b/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>
   );
 };
 
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index b9bd55b..d83ae6e 100644
--- a/src/pages/resources/index.tsx
+++ b/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>
   );
 };