conditionally render the admin bar based on role rather than just if they are signed in

src/components/admin/ControlBar.tsx

@@ -1,3 +1,4 @@
+import { Role } from "@prisma/client";
 import { useSession } from "next-auth/react";
 
 const AdminBarLayout = ({
@@ -11,7 +12,7 @@ const AdminBarLayout = ({
 
   return (
     <div className="relative">
-      {data?.user ? (
+      {data?.user.role === Role.ADMIN ? (
         <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

src/server/auth.ts

@@ -9,11 +9,13 @@ import { PrismaAdapter } from "@next-auth/prisma-adapter";
 import { prisma } from "~/server/db";
 import { loginSchema } from "~/lib/validation/auth";
 import { verify } from "argon2";
+import { type Role } from "@prisma/client";
 
 interface SessionUser {
   id: string;
   name: string;
   username: string;
+  role: Role;
 }
 
 /**
@@ -100,6 +102,7 @@ export const authOptions: NextAuthOptions = {
             id: result.id,
             name: result.name,
             username,
+            role: result.role,
           };
         } catch {
           return null;