37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { apiFetch } from "@/lib/api";
|
|
|
|
export default function Shell({ children }: { children: React.ReactNode }) {
|
|
const [me, setMe] = useState<{email:string, role:string} | null>(null);
|
|
|
|
useEffect(() => {
|
|
apiFetch("/auth/me").then(setMe).catch(() => setMe(null));
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex">
|
|
<aside className="w-64 shrink-0 border-r border-zinc-800 min-h-screen p-4">
|
|
<div className="text-lg font-semibold">mt-traffic</div>
|
|
<div className="mt-4 space-y-2 text-sm">
|
|
<Link className="block hover:text-white text-zinc-300" href="/dashboards">Dashboards</Link>
|
|
<Link className="block hover:text-white text-zinc-300" href="/admin">Admin</Link>
|
|
</div>
|
|
<div className="mt-6 text-xs text-zinc-400">
|
|
{me ? (
|
|
<div>
|
|
<div>{me.email}</div>
|
|
<div className="uppercase">{me.role}</div>
|
|
</div>
|
|
) : (
|
|
<div>Not logged in</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
<main className="flex-1 p-6">{children}</main>
|
|
</div>
|
|
);
|
|
}
|