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

add admin mode bar on top of page

Browse Source
This commit is contained in:
Brandon Egger 2023-05-22 22:15:30 -05:00
parent e6fdbf714d
commit a69e32ee11
2 changed files with 50 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/admin/ControlBar.tsx Normal file
View File

@ -0,0 +1,20 @@
const AdminBarLayout = ({
actions,
children,
}: {
actions: JSX.Element | JSX.Element[];
children: JSX.Element | JSX.Element[];
}) => {
return (
<div className="relative">
<div className="sticky left-0 right-0 top-[71px] z-10 mx-auto mb-8 mt-[15px] flex max-w-4xl flex-row rounded-xl border border-neutral-600 bg-red-300 drop-shadow-xl">
<h1 className="rounded-lg px-4 py-2 font-semibold text-black">
Admin Mode
</h1>
</div>
{children}
</div>
);
};
export { AdminBarLayout };

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

@ -10,6 +10,7 @@ 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";
export const getStaticPaths = async () => {
const resources = await prisma.auditoryResource.findMany({
@ -133,35 +134,37 @@ const ResourceViewPage = (
<>
<div className="min-h-screen">
<Header />
<main className="mb-12">
<div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
<div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
<div className="mx-4">
<h1 className="mb-2 border-b border-neutral-400">Links</h1>
<DownloadButtons
platformLinks={resourceQuery.data.platform_links}
/>
<AdminBarLayout>
<main className="mb-12">
<div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
<div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
<div className="mx-4">
<h1 className="mb-2 border-b border-neutral-400">Links</h1>
<DownloadButtons
platformLinks={resourceQuery.data.platform_links}
/>
</div>
</div>
<div className="justify-left flex flex-col pb-5">
<ResourceInfo resource={resourceQuery.data} />
<div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
<ResourceDescription
manufacturer={resourceQuery.data.manufacturer}
description={resourceQuery.data.description}
/>
</div>
<div className="ml-4 mr-auto mt-4 rounded-lg border-2 border-neutral-900 bg-neutral-600">
<span className="px-2 py-2 text-sm text-neutral-200">
Ages {resourceQuery.data.ages.min}
{resourceQuery.data.ages.max >= 100
? "+"
: `-${resourceQuery.data.ages.max}`}
</span>
</div>
</div>
</div>
<div className="justify-left flex flex-col pb-5">
<ResourceInfo resource={resourceQuery.data} />
<div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
<ResourceDescription
manufacturer={resourceQuery.data.manufacturer}
description={resourceQuery.data.description}
/>
</div>
<div className="ml-4 mr-auto mt-4 rounded-lg border-2 border-neutral-900 bg-neutral-600">
<span className="px-2 py-2 text-sm text-neutral-200">
Ages {resourceQuery.data.ages.min}
{resourceQuery.data.ages.max >= 100
? "+"
: `-${resourceQuery.data.ages.max}`}
</span>
</div>
</div>
</div>
</main>
</main>
</AdminBarLayout>
<Footer />
</div>
</>