44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import Link from 'next/link'
|
||
|
|
import { usePathname } from 'next/navigation'
|
||
|
|
|
||
|
|
const SURFACES = [
|
||
|
|
{ code: 'B', href: '/cluster', label: 'Topology' },
|
||
|
|
{ code: 'E', href: '/cluster/delivery', label: 'Delivery' },
|
||
|
|
{ code: 'C', href: '/cluster/terminal', label: 'Terminal' },
|
||
|
|
{ code: 'D', href: '/cluster/chat', label: 'Chat' },
|
||
|
|
]
|
||
|
|
|
||
|
|
export function Rail() {
|
||
|
|
const pathname = usePathname()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav
|
||
|
|
aria-label="Cluster surfaces"
|
||
|
|
className="flex shrink-0 gap-px overflow-x-auto border-b border-wire bg-void md:w-16 md:flex-col md:overflow-visible md:border-b-0 md:border-r"
|
||
|
|
>
|
||
|
|
{SURFACES.map((s) => {
|
||
|
|
const active = pathname === s.href
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={s.href}
|
||
|
|
href={s.href}
|
||
|
|
aria-current={active ? 'page' : undefined}
|
||
|
|
className={[
|
||
|
|
'group flex flex-1 flex-row items-center gap-2 px-4 py-3 transition-colors md:flex-none md:flex-col md:gap-1 md:px-0 md:py-4',
|
||
|
|
'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-lamp',
|
||
|
|
active ? 'bg-deck text-lamp' : 'text-dim hover:bg-riser hover:text-chalk',
|
||
|
|
].join(' ')}
|
||
|
|
>
|
||
|
|
<span className="font-signage text-lg font-semibold leading-none">{s.code}</span>
|
||
|
|
<span className="font-data text-[9px] uppercase tracking-[0.14em] md:[writing-mode:vertical-rl]">
|
||
|
|
{s.label}
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|