control bar shows conditionally based on if user is signed in

This commit is contained in:
Brandon Egger
2023-05-22 23:08:56 -05:00
parent 6fc925da87
commit 6bcd20897d
3 changed files with 28 additions and 7 deletions

View File

@ -1,3 +1,5 @@
import { useSession } from "next-auth/react";
const AdminBarLayout = ({
actions,
children,
@ -5,14 +7,18 @@ const AdminBarLayout = ({
actions: JSX.Element | JSX.Element[];
children: JSX.Element | JSX.Element[];
}) => {
const { data } = useSession();
return (
<div className="relative">
<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>
{data?.user ? (
<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>
) : undefined}
{children}
</div>
);