From e5a45ae9c1a97e5d97ebcbc29f1bb6406f5b4861 Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Wed, 12 Apr 2023 23:05:34 -0500
Subject: [PATCH] move header and footer from _app to allow more flexibility
 for things like spanning view height

---
 src/pages/_app.tsx             |  4 ---
 src/pages/about.tsx            |  8 +++--
 src/pages/contact.tsx          | 14 +++++---
 src/pages/index.tsx            | 58 +++++++++++++++++++---------------
 src/pages/resources/[id].tsx   | 38 +++++++++++++---------
 src/pages/resources/index.tsx  |  5 ++-
 src/pages/resources/search.tsx |  8 +++--
 7 files changed, 81 insertions(+), 54 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index f2c0790..5e2de70 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,8 +5,6 @@ import { SessionProvider } from "next-auth/react";
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
-import Header from "~/components/Header";
-import Footer from "~/components/Footer";
 import Head from "next/head";
 
 const MyApp: AppType<{ session: Session | null }> = ({
@@ -20,9 +18,7 @@ const MyApp: AppType<{ session: Session | null }> = ({
         <meta name="description" content="University of Iowa Center for Auditory Training Resources" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Header />
       <Component {...pageProps} />
-      <Footer />
     </SessionProvider>
   );
 };
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 2c48ca3..8c86c27 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,4 +1,6 @@
 import { type NextPage } from "next/types";
+import Footer from "~/components/Footer";
+import Header from "~/components/Header";
 
 type Position = "left" | "right";
 interface Biography {
@@ -43,7 +45,8 @@ const biographies: Biography[] = [
 
 const About: NextPage = () => {
   
-    return (
+    return <>
+        <Header />
         <main>
             <div style={{
                 backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
@@ -73,7 +76,8 @@ const About: NextPage = () => {
                 </div>
             </div>
         </main>
-    );
+        <Footer />
+    </>
 };
 
 export default About
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index aa5e159..3e18d0e 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -1,12 +1,16 @@
 import { type NextPage } from "next/types";
+import Footer from "~/components/Footer";
+import Header from "~/components/Header";
 
 const Contact: NextPage = () => {
   
-    return (
-        <div>
-
-        </div>
-    );
+    return <>
+        <Header />
+        <main>
+            
+        </main>
+        <Footer />
+    </>
 };
 
 export default Contact
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 40ea185..f0f8bd0 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,8 @@
 import { type NextPage } from "next";
 import Link from "next/link";
 import { ArrowUpRightIcon } from '@heroicons/react/20/solid';
+import Footer from "~/components/Footer";
+import Header from "~/components/Header";
 
 const TextLink = ({href, children}: {
   href: string,
@@ -18,35 +20,30 @@ const Home: NextPage = () => {
   
   return (
     <>
-      <main>
+      <div className="min-h-screen flex flex-col">
+        <Header />
         <div style={{
-            backgroundImage: `url("/backdrops/patient-clinic-bg.jpeg")`,
-            backgroundPosition: `center`,
-          }} className="h-96">
-            <div style={{
-              WebkitBackdropFilter: `blur(15px) contrast(50%)`,
-              backdropFilter: `blur(15px) contrast(50%)`,
-            }} className="h-full w-full grid place-items-center">
-              <div className="space-y-8">
-                <h1 className="mx-auto text-center font-extrabold text-4xl max-w-lg text-yellow-200">Welcome to the Resource Center for Auditory Training!</h1>
-                <div className="flex flex-col w-[350px] sm:w-[400px] mx-auto p-4 bg-neutral-900 border space-y-4 border-neutral-500 rounded-md shadow-lg shadow-neutral-800/50">
-                  <p className="text-2xl text-center text-neutral-100">Looking for resource recommendations?</p>
-                  <Link href="/resources/search" className="flex flex-inline font-bold border border-neutral-300 mx-auto bg-yellow-400 hover:bg-yellow-100 p-2 rounded-md animate-expand_in_out">
-                    Search for Auditory Resources
-                    <ArrowUpRightIcon className="inline w-5" />
-                  </Link>
+              backgroundImage: `url("/backdrops/patient-clinic-bg.jpeg")`,
+              backgroundPosition: `center`,
+            }} className="grow flex flex-col">
+              <div style={{
+                WebkitBackdropFilter: `blur(15px) contrast(50%)`,
+                backdropFilter: `blur(15px) contrast(50%)`,
+              }} className="grow min-h-[350px] w-full grid place-items-center">
+                <div className="space-y-8">
+                  <h1 className="mx-auto text-center font-extrabold text-4xl max-w-lg text-yellow-200">Welcome to the Resource Center for Auditory Training!</h1>
+                  <div className="flex flex-col w-[350px] sm:w-[400px] mx-auto p-4 bg-neutral-900 border space-y-4 border-neutral-500 rounded-md shadow-lg shadow-neutral-800/50">
+                    <p className="text-2xl text-center text-neutral-100">Looking for resource recommendations?</p>
+                    <Link href="/resources/search" className="flex flex-inline font-bold border border-neutral-300 mx-auto bg-yellow-400 hover:bg-yellow-100 p-2 rounded-md animate-expand_in_out">
+                      Search for Auditory Resources
+                      <ArrowUpRightIcon className="inline w-5" />
+                    </Link>
+                  </div>
                 </div>
               </div>
-            </div>
-        </div>
-        <div className="p-4 sm:p-12 bg-neutral-900 text-white border-t border-y border-yellow-200">
-          <div className="max-w-5xl flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-white mx-auto">
-            <h1 className="grow h-full my-auto pr-auto text-4xl p-4 font-bold text-center text-yellow-200">Our Purpose</h1>
-            <section className="px-4 text-neutral-300">
-              <p className="pt-2">The goal of this site is to provide resources for cochlear implant users to practice listening with their device. While cochlear implants are highly effective in providing access to speech sounds for patients, it can take time and practice for them to adjust to the new signal transmitted through the implant. Auditory training can assist cochlear implant users in practicing listening to environmental sounds, understanding speech sounds in both quiet and noisy environments, and (re)training to enjoy music. We have compiled and categorized all available auditory training resources for cochlear implant users, including smartphone, web-based, and other online resources that can be utilized as clinician-guided or home-based by the cochlear implant patient and their families. Our online index allows both professionals and patients to filter through the resources based on specific characteristics and requested features, making the selection process more efficient.</p>
-            </section>
           </div>
-        </div>
+      </div>
+      <main>
         <div className="p-4 sm:p-12 bg-yellow-100 text-white drop-shadow-md border border-b border-neutral-400">
           <div className="max-w-5xl flex flex-col-reverse md:flex-row md:divide-y-0 md:divide-x divide-neutral-700 mx-auto">
             <section className="px-4 text-neutral-800">
@@ -55,6 +52,16 @@ const Home: NextPage = () => {
             <h1 className="grow h-full my-auto pr-auto text-4xl font-bold p-4 text-center text-black">Getting Started</h1>
           </div>
         </div>
+
+        <div className="p-4 sm:p-12 bg-neutral-900 text-white border-t border-y border-yellow-200">
+          <div className="max-w-5xl flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-white mx-auto">
+            <h1 className="grow h-full my-auto pr-auto text-4xl p-4 font-bold text-center text-yellow-200">Our Purpose</h1>
+            <section className="px-4 text-neutral-300">
+              <p className="pt-2">The goal of this site is to provide resources for cochlear implant users to practice listening with their device. While cochlear implants are highly effective in providing access to speech sounds for patients, it can take time and practice for them to adjust to the new signal transmitted through the implant. Auditory training can assist cochlear implant users in practicing listening to environmental sounds, understanding speech sounds in both quiet and noisy environments, and (re)training to enjoy music. We have compiled and categorized all available auditory training resources for cochlear implant users, including smartphone, web-based, and other online resources that can be utilized as clinician-guided or home-based by the cochlear implant patient and their families. Our online index allows both professionals and patients to filter through the resources based on specific characteristics and requested features, making the selection process more efficient.</p>
+            </section>
+          </div>
+        </div>
+        
         <div className="max-w-5xl mx-auto p-12">
           <h1 className="font-extrabold text-4xl text-center">Want to learn more?</h1>
           <div className="flex flex-col pt-8 space-y-6">
@@ -79,6 +86,7 @@ const Home: NextPage = () => {
           </div>
         </div>
       </main>
+      <Footer/>
     </>
   );
 };
diff --git a/src/pages/resources/[id].tsx b/src/pages/resources/[id].tsx
index fb3b71b..c0ebb00 100644
--- a/src/pages/resources/[id].tsx
+++ b/src/pages/resources/[id].tsx
@@ -8,6 +8,8 @@ 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";
 
 export const getStaticPaths = async () => {
   const resources = (await prisma.auditoryResource.findMany({
@@ -116,22 +118,28 @@ const ResourceViewPage = (props: InferGetStaticPropsType<typeof getStaticProps>)
   }
 
   return <>
-    <div className="flex py-4 flex-col flex-col-reverse sm:flex-row divide-x max-w-2xl mx-auto">
-      <div className="text-lg flex flex-col justify-end font-bold my-5 mr-4">
-        <div className="mx-4">
-          <h1 className="border-b mb-2 border-neutral-400">Links</h1>
-          <DownloadButtons platformLinks={resourceQuery.data.platform_links} />
+    <div className="min-h-screen">
+      <Header />
+      <main>
+        <div className="flex py-4 flex-col flex-col-reverse sm:flex-row divide-x max-w-2xl mx-auto">
+          <div className="text-lg flex flex-col justify-end font-bold my-5 mr-4">
+            <div className="mx-4">
+              <h1 className="border-b mb-2 border-neutral-400">Links</h1>
+              <DownloadButtons platformLinks={resourceQuery.data.platform_links} />
+            </div>
+          </div>
+          <div className="flex pb-5 flex-col justify-left">
+            <ResourceInfo resource={resourceQuery.data} />
+            <div className="mx-4 text-left border border-neutral-400 rounded-xl overflow-hidden bg-neutral-200 shadow">
+              <ResourceDescription manufacturer={resourceQuery.data.manufacturer} description={resourceQuery.data.description} />
+            </div>
+            <div className="ml-4 mt-4 mr-auto border-2 border-neutral-900 rounded-lg bg-neutral-600">
+              <span className="text-neutral-200 text-sm px-2 py-2">Ages {resourceQuery.data.ages.min}{resourceQuery.data.ages.max >= 100 ? "+" : `-${resourceQuery.data.ages.max}`}</span>
+            </div>
+          </div>
         </div>
-      </div>
-      <div className="flex pb-5 flex-col justify-left">
-        <ResourceInfo resource={resourceQuery.data} />
-        <div className="mx-4 text-left border border-neutral-400 rounded-xl overflow-hidden bg-neutral-200 shadow">
-          <ResourceDescription manufacturer={resourceQuery.data.manufacturer} description={resourceQuery.data.description} />
-        </div>
-        <div className="ml-4 mt-4 mr-auto border-2 border-neutral-900 rounded-lg bg-neutral-600">
-          <span className="text-neutral-200 text-sm px-2 py-2">Ages {resourceQuery.data.ages.min}{resourceQuery.data.ages.max >= 100 ? "+" : `-${resourceQuery.data.ages.max}`}</span>
-        </div>
-      </div>
+      </main>
+      <Footer/>
     </div>
   </>
 };
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index 0a6ead5..d88cc8f 100644
--- a/src/pages/resources/index.tsx
+++ b/src/pages/resources/index.tsx
@@ -1,10 +1,11 @@
-import Head from "next/head";
 import { LinkIcon } from '@heroicons/react/20/solid';
 import Link from "next/link";
 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";
 
 const Resources = () => {
   const router = useRouter()
@@ -29,6 +30,7 @@ const Resources = () => {
 
   return (
     <>
+      <Header />
       <main className="my-6 md:px-4 max-w-6xl mx-auto">
         <div className="sm:mb-4 mb-2 sm:p-4 p-2 space-y-2">
           <h1 className="text-3xl font-bold">All Resources</h1>
@@ -44,6 +46,7 @@ const Resources = () => {
         </div>
         <ResourceTable resourcesPerPage={queryData.perPage} resources={resourceQuery.data.resources} totalPages={totalPages} query={router.query} currentPage={currentPage} />
       </main>
+      <Footer />
     </>
   );
 }
diff --git a/src/pages/resources/search.tsx b/src/pages/resources/search.tsx
index ad514dc..ac73aa9 100644
--- a/src/pages/resources/search.tsx
+++ b/src/pages/resources/search.tsx
@@ -1,3 +1,5 @@
+import Footer from "~/components/Footer";
+import Header from "~/components/Header";
 import { GuidedSearch, type Question, type QuestionTypes } from "~/components/Search";
 
 const questions: Question<QuestionTypes>[] = [
@@ -101,11 +103,13 @@ const questions: Question<QuestionTypes>[] = [
 ]
 
 const SearchPage = () => {
-    return (
+    return <>
+        <Header />
         <div className="w-full max-w-xl mx-auto mt-4 mb-4 rounded-xl overflow-hidden border border-neutral-400 bg-neutral-200 drop-shadow-md">
             <GuidedSearch questions={questions} />
         </div>
-    )
+        <Footer />
+    </>
 }
 
 export default SearchPage
\ No newline at end of file