brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

move header and footer from _app to allow more flexibility for things like spanning view height

Browse Source
This commit is contained in:
Brandon Egger
2023-04-12 23:05:34 -05:00
parent a511d63a4f
commit e5a45ae9c1
7 changed files with 81 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/resources/[id].tsx
View File

@ -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>
</>
};

5
src/pages/resources/index.tsx
View File

@ -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 />
</>
);
}

8
src/pages/resources/search.tsx
View File

@ -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