76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import { Link, Outlet, useLocation } from 'react-router-dom'
|
|
import { LayoutDashboard, LogOut, BookOpen, GraduationCap, BarChart, Settings } from 'lucide-react'
|
|
import { useAppStore } from '@/store/useAppStore'
|
|
import { WebsiteSelector } from '@/components/WebsiteSelector'
|
|
|
|
export function AdminLayout() {
|
|
const { logout } = useAppStore()
|
|
const location = useLocation()
|
|
|
|
const navItems = [
|
|
{ name: 'Dashboard', path: '/admin/dashboard', icon: LayoutDashboard },
|
|
{ name: 'Questions', path: '/admin/questions', icon: BookOpen },
|
|
{ name: 'Tryouts', path: '/admin/tryouts', icon: GraduationCap },
|
|
{ name: 'Reports', path: '/admin/reports', icon: BarChart },
|
|
{ name: 'Settings', path: '/admin/settings', icon: Settings },
|
|
]
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden bg-muted/20">
|
|
{/* Sidebar */}
|
|
<aside className="w-64 flex-shrink-0 border-r bg-background">
|
|
<div className="flex h-16 items-center px-6 border-b">
|
|
<span className="text-lg font-bold">IRT Bank Soal</span>
|
|
</div>
|
|
<nav className="p-4 space-y-1">
|
|
{navItems.map((item) => {
|
|
const isActive = location.pathname.startsWith(item.path)
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
|
|
isActive
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'hover:bg-muted text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
<item.icon className="h-4 w-4" />
|
|
{item.name}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
<div className="absolute bottom-4 left-4 right-4">
|
|
<button
|
|
onClick={() => {
|
|
logout()
|
|
window.location.href = '/login'
|
|
}}
|
|
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="flex-1 overflow-y-auto">
|
|
<div className="h-16 flex items-center justify-between px-6 border-b bg-background">
|
|
<div className="flex items-center gap-4">
|
|
<WebsiteSelector />
|
|
</div>
|
|
<div className="text-sm text-muted-foreground flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
|
System Online
|
|
</div>
|
|
</div>
|
|
<div className="p-8">
|
|
<Outlet />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|