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

add generic layout for reuse

Browse Source
This commit is contained in:
Brandon Egger 2023-08-24 13:30:09 -05:00
parent 71a956d28a
commit 2180d798d0
5 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/notice.tsx
View File

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

13
src/layouts/HeaderFooterLayout.tsx Normal file
View File

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

13
src/pages/resources/[id]/edit.tsx
View File

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

37
src/pages/resources/[id]/index.tsx
View File

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

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

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