add edit page button

src/components/admin/ControlBar.tsx

@@ -7,10 +7,11 @@ const AdminBarLayout = ({
 }) => {
   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">
+      <div className="sticky left-0 right-0 top-[71px] z-10 mx-auto mb-6 mt-[15px] flex max-w-4xl flex-row justify-between 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 className="flex flex-row space-x-2 p-1">{actions}</div>
       </div>
       {children}
     </div>

src/components/admin/common.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+
+const AdminActionLink = ({
+  label,
+  href,
+  symbol,
+}: {
+  label: string;
+  href: string;
+  symbol: JSX.Element | undefined;
+}) => {
+  return (
+    <Link
+      className="py-auto group my-auto h-full space-x-2 rounded-lg border border-neutral-400 bg-neutral-800 px-2 hover:border-neutral-800 hover:bg-white"
+      href={href}
+    >
+      <span className="my-auto inline-block h-fit align-middle text-sm leading-8 text-white group-hover:text-black">
+        {label}
+      </span>
+      <span className="inline-block align-middle text-white group-hover:text-black">
+        {symbol}
+      </span>
+    </Link>
+  );
+};
+
+export { AdminActionLink };

src/pages/resources/[id].tsx

@@ -1,5 +1,6 @@
 import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next";
 import { GlobeAltIcon, DocumentIcon } from "@heroicons/react/24/solid";
+import { PencilSquareIcon } from "@heroicons/react/20/solid";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import { appRouter } from "~/server/api/root";
 import { prisma } from "~/server/db";
@@ -11,6 +12,7 @@ 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";
 
 export const getStaticPaths = async () => {
   const resources = await prisma.auditoryResource.findMany({
@@ -134,7 +136,15 @@ const ResourceViewPage = (
     <>
       <div className="min-h-screen">
         <Header />
-        <AdminBarLayout>
+        <AdminBarLayout
+          actions={
+            <AdminActionLink
+              symbol={<PencilSquareIcon className="w-4" />}
+              label="Edit Page"
+              href="/"
+            />
+          }
+        >
           <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">