87 lines
3.6 KiB
TypeScript
87 lines
3.6 KiB
TypeScript
import { Cloud, Github, Home, LogOut, Settings, Sparkles, Terminal } from 'lucide-react'
|
|
import { NavLink, Outlet, useNavigate } from 'react-router-dom'
|
|
import { TerminalLogs } from '../components/TerminalLogs'
|
|
import { useAuth } from '../contexts/Auth'
|
|
|
|
const navItems = [
|
|
{ label: 'Overview', to: '/', icon: Home },
|
|
{ label: 'Hello World', to: '/hello', icon: Sparkles },
|
|
{ label: 'GitHub Repos', to: '/github', icon: Github },
|
|
{ label: 'Cloudflare Zones', to: '/cloudflare', icon: Cloud },
|
|
{ label: 'Settings', to: '/settings', icon: Settings },
|
|
]
|
|
|
|
const activeClass =
|
|
'flex items-center gap-2 rounded-md bg-slate-800/80 px-3 py-2 text-slate-50 shadow-inner shadow-slate-950 border border-slate-700'
|
|
const baseClass =
|
|
'flex items-center gap-2 rounded-md px-3 py-2 text-slate-300 hover:bg-slate-800/50 transition-colors duration-150 border border-transparent'
|
|
|
|
export default function DashboardLayout() {
|
|
const { user, logout } = useAuth()
|
|
const navigate = useNavigate()
|
|
|
|
const handleLogout = async () => {
|
|
await logout()
|
|
navigate('/login')
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-slate-950 text-slate-100">
|
|
<aside className="fixed left-0 top-0 flex h-full w-64 flex-col border-r border-slate-800 bg-slate-900/90 px-4 py-4 shadow-2xl shadow-slate-950/80">
|
|
<div className="mb-4 border-b border-slate-800 pb-3">
|
|
<p className="text-[10px] uppercase tracking-[0.35em] text-cyan-400">DevOps</p>
|
|
<h1 className="text-lg font-semibold text-slate-50">Dashboard</h1>
|
|
<p className="text-xs text-slate-400">VSCode-like dense sidebar</p>
|
|
</div>
|
|
|
|
<nav className="flex-1 space-y-1 text-sm">
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
end={item.to === '/'}
|
|
className={({ isActive }) => (isActive ? activeClass : baseClass)}
|
|
>
|
|
<item.icon size={16} />
|
|
<span className="text-sm">{item.label}</span>
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="mt-auto space-y-2 border-t border-slate-800 pt-3 text-sm text-slate-300">
|
|
<p className="flex items-center justify-between text-xs text-slate-500">
|
|
<span className="truncate">{user?.email}</span>
|
|
<Terminal size={14} className="text-cyan-300" />
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={handleLogout}
|
|
className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-slate-300 transition hover:bg-red-500/10 hover:text-red-200"
|
|
>
|
|
<LogOut size={16} />
|
|
Sair
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<div className="ml-64 flex min-h-screen flex-1 flex-col">
|
|
<header className="flex items-center justify-between border-b border-slate-800 bg-slate-900/70 px-6 py-3 backdrop-blur">
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-[0.28em] text-cyan-300">Painel de Controle</p>
|
|
<h2 className="text-xl font-semibold text-slate-50">DevOps Orchestration</h2>
|
|
</div>
|
|
<div className="flex items-center gap-2 rounded-lg bg-slate-800/70 px-3 py-1 text-xs text-slate-300 shadow-inner shadow-slate-950">
|
|
<span className="rounded bg-emerald-500/20 px-2 py-0.5 text-emerald-300">Online</span>
|
|
<span className="text-cyan-200">{user?.name || user?.email}</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 overflow-y-auto bg-slate-900/40 px-8 py-6">
|
|
<Outlet />
|
|
</main>
|
|
|
|
<TerminalLogs />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|