add admin bar with create button

src/pages/resources/index.tsx

@@ -1,5 +1,5 @@
 import { LinkIcon } from "@heroicons/react/20/solid";
-import { PrinterIcon } from "@heroicons/react/24/solid";
+import { PrinterIcon, PlusCircleIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import ResourceTable from "~/components/ResourceTable";
@@ -8,6 +8,42 @@ import { parseQueryData } from "~/utils/parseSearchForm";
 import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
 import { type AuditoryResource } from "@prisma/client";
 import { QueryWaitWrapper } from "~/components/LoadingWrapper";
+import { AdminBarLayout } from "~/components/admin/ControlBar";
+import { AdminActionLink } from "~/components/admin/common";
+
+const PageHeader = ({ printLink }: { printLink: string }) => {
+  return (
+    <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>
+        <div className="">
+          <p className="inline">Fill out the </p>
+          <Link
+            href="/resources/search"
+            className="inline rounded-lg border border-neutral-800 bg-neutral-200 px-2 py-[4px] hover:bg-neutral-900 hover:text-white"
+          >
+            search form
+            <LinkIcon className="inline w-4" />
+          </Link>
+          <p className="inline">
+            {" "}
+            for a list of auditory training resource recommendations.
+          </p>
+        </div>
+      </section>
+
+      <section className="mt-auto">
+        <Link
+          href={printLink}
+          className="inline-block whitespace-nowrap rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md print:hidden sm:space-x-2"
+        >
+          <span className="hidden sm:inline-block">Print Results</span>
+          <PrinterIcon className="inline-block w-6" />
+        </Link>
+      </section>
+    </div>
+  );
+};
 
 const Resources = () => {
   const router = useRouter();
@@ -49,39 +85,22 @@ const Resources = () => {
 
   return (
     <HeaderFooterLayout>
+      <AdminBarLayout
+        actions={[
+          <AdminActionLink
+            key="cancel"
+            symbol={<PlusCircleIcon className="w-4" />}
+            label="Create New"
+            href={`/resources/create`}
+          />,
+        ]}
+      >
         <div className="mx-auto mb-12 mt-6 w-full max-w-6xl md:px-2">
-        <div className="mb-2 flex flex-row justify-between p-2 print:hidden sm:mb-4 sm:p-4">
+          <PageHeader printLink={printLink} />
-          <section className="space-y-2">
-            <h1 className="text-3xl font-bold">All Resources</h1>
-            <div className="">
-              <p className="inline">Fill out the </p>
-              <Link
-                href="/resources/search"
-                className="inline rounded-lg border border-neutral-800 bg-neutral-200 px-2 py-[4px] hover:bg-neutral-900 hover:text-white"
-              >
-                search form
-                <LinkIcon className="inline w-4" />
-              </Link>
-              <p className="inline">
-                {" "}
-                for a list of auditory training resource recommendations.
-              </p>
-            </div>
-          </section>
-
-          <section className="mt-auto">
-            <Link
-              href={printLink}
-              className="inline-block whitespace-nowrap rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md print:hidden sm:space-x-2"
-            >
-              <span className="hidden sm:inline-block">Print Results</span>
-              <PrinterIcon className="inline-block w-6" />
-            </Link>
-          </section>
-        </div>
 
           <QueryWaitWrapper query={resourceQuery} Render={ConditionalTable} />
         </div>
+      </AdminBarLayout>
     </HeaderFooterLayout>
   );
 };