cf2a2d89d9
feat(admin-web): display environment badge in admin console feat(admin-web): configure Nginx for SPA and copy config fix(Makefile): fix typo in CR_ADMIN_IMAGE_URI variable assignment feat(firebase): update launchpad title to "Launchpad"
89 lines
3.5 KiB
JavaScript
89 lines
3.5 KiB
JavaScript
import React from "react";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import { Building2, Users, BarChart3, Terminal, LayoutDashboard, LogOut } from "lucide-react";
|
|
|
|
const navigation = [
|
|
{ name: "Dashboard", href: "/admin-web/", icon: LayoutDashboard },
|
|
{ name: "User Management", href: "/admin-web/user-management", icon: Users },
|
|
{ name: "Analytics", href: "/admin-web/analytics", icon: BarChart3 },
|
|
{ name: "Logs Explorer", href: "/admin-web/logs", icon: Terminal },
|
|
];
|
|
|
|
export default function Layout({ children }) {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<div className="flex h-screen bg-slate-50">
|
|
{/* Sidebar */}
|
|
<div className="hidden md:flex md:flex-shrink-0">
|
|
<div className="flex flex-col w-64">
|
|
{/* Sidebar header */}
|
|
<div className="flex items-center h-16 flex-shrink-0 px-4 bg-white border-b border-slate-200">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 rounded-lg flex items-center justify-center">
|
|
<img src="/logo.svg" alt="Krow Logo" className="h-full w-full" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-lg font-bold text-slate-800">KROW</h1>
|
|
<p className="text-xs text-slate-500">Admin Console</p>
|
|
</div>
|
|
</div>
|
|
{import.meta.env.VITE_APP_ENV && (
|
|
<span className={`ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
import.meta.env.VITE_APP_ENV === 'staging' ? 'bg-amber-100 text-amber-800' : 'bg-blue-100 text-blue-800'
|
|
}`}>
|
|
{import.meta.env.VITE_APP_ENV === 'staging' ? 'Staging' : 'Dev'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{/* Sidebar content */}
|
|
<div className="flex-1 flex flex-col overflow-y-auto bg-white">
|
|
<nav className="flex-1 px-4 py-4">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
to={item.href}
|
|
className={`
|
|
${
|
|
location.pathname === item.href
|
|
? "bg-blue-50 text-blue-600"
|
|
: "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
|
|
}
|
|
group flex items-center px-3 py-3 text-sm font-medium rounded-lg
|
|
`}
|
|
>
|
|
<item.icon
|
|
className="mr-3 h-6 w-6"
|
|
aria-hidden="true"
|
|
/>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="px-4 py-4 border-t border-slate-200">
|
|
<Link
|
|
to="#"
|
|
className="group flex items-center px-3 py-3 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-100 hover:text-slate-900"
|
|
>
|
|
<LogOut className="mr-3 h-6 w-6" />
|
|
Logout
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<div className="flex flex-col w-0 flex-1 overflow-hidden">
|
|
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
|
|
<div className="py-8">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|