38 lines
1.7 KiB
TypeScript
38 lines
1.7 KiB
TypeScript
import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom'
|
|
import { useZino } from '../zino-sdk'
|
|
import { PROCESSES } from '../config'
|
|
|
|
const link = ({ isActive }: { isActive: boolean }) =>
|
|
`block px-3 py-1.5 rounded text-sm ${isActive ? 'bg-blue-50 text-blue-700 font-medium' : 'text-slate-700 hover:bg-slate-100'}`
|
|
|
|
export default function Layout() {
|
|
const { user, auth, setUser } = useZino()
|
|
const nav = useNavigate()
|
|
const signOut = async () => { await auth.logout(); setUser(null); nav('/login') }
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-slate-50 text-slate-800">
|
|
<header className="h-14 bg-white border-b border-slate-200 px-5 flex items-center justify-between">
|
|
<Link to="/" className="font-semibold">Truck Desk</Link>
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<span className="text-slate-500">{user?.name || user?.email}</span>
|
|
<button onClick={signOut} className="text-blue-700 hover:underline">Sign out</button>
|
|
</div>
|
|
</header>
|
|
<div className="flex flex-1">
|
|
<nav className="w-60 bg-white border-r border-slate-200 p-3 space-y-4" aria-label="Processes">
|
|
<NavLink to="/" end className={link}>Home</NavLink>
|
|
{PROCESSES.map((p) => (
|
|
<div key={p.slug}>
|
|
<div className="px-3 text-xs uppercase tracking-wide text-slate-400 mb-1">{p.name}</div>
|
|
{p.lists.map((l) => (
|
|
<NavLink key={l.slug} to={`/lists/${l.slug}`} className={link}>{l.name}</NavLink>
|
|
))}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
<main className="flex-1 p-6 min-w-0"><Outlet /></main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|