add admin mode bar on top of page

src/components/admin/ControlBar.tsx

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

src/pages/resources/[id].tsx

@@ -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,6 +134,7 @@ const ResourceViewPage = (
     <>
       <div className="min-h-screen">
         <Header />
+        <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">
@@ -162,6 +164,7 @@ const ResourceViewPage = (
               </div>
             </div>
           </main>
+        </AdminBarLayout>
         <Footer />
       </div>
     </>