Next.js admin frontend for Core with 3 categories (Communication, Infrastructure, Development), 13 modules, 2 roles (developer, ops), and 11 API proxy routes. Includes docker-compose service and nginx SSL config. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { navigation, metaModules, getModuleByHref, getCategoryById, CategoryId } from '@/lib/navigation'
|
|
|
|
export function Breadcrumbs() {
|
|
const pathname = usePathname()
|
|
|
|
const items: Array<{ label: string; href: string }> = []
|
|
|
|
items.push({ label: 'Dashboard', href: '/dashboard' })
|
|
|
|
const pathParts = pathname.split('/').filter(Boolean)
|
|
|
|
if (pathParts.length > 0) {
|
|
const categoryId = pathParts[0] as CategoryId
|
|
const category = getCategoryById(categoryId)
|
|
|
|
if (category) {
|
|
items.push({ label: category.name, href: `/${category.id}` })
|
|
|
|
if (pathParts.length > 1) {
|
|
const moduleHref = `/${pathParts[0]}/${pathParts[1]}`
|
|
const result = getModuleByHref(moduleHref)
|
|
if (result) {
|
|
items.push({ label: result.module.name, href: moduleHref })
|
|
}
|
|
}
|
|
} else {
|
|
const metaModule = metaModules.find(m => m.href === `/${pathParts[0]}`)
|
|
if (metaModule && metaModule.href !== '/dashboard') {
|
|
items.push({ label: metaModule.name, href: metaModule.href })
|
|
}
|
|
}
|
|
}
|
|
|
|
if (items.length <= 1) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<nav className="flex items-center gap-2 text-sm text-slate-500 mb-4">
|
|
{items.map((item, index) => (
|
|
<span key={`${index}-${item.href}`} className="flex items-center gap-2">
|
|
{index > 0 && (
|
|
<svg className="w-4 h-4 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
)}
|
|
{index === items.length - 1 ? (
|
|
<span className="text-slate-900 font-medium">{item.label}</span>
|
|
) : (
|
|
<Link
|
|
href={item.href}
|
|
className="hover:text-primary-600 transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
)}
|
|
</span>
|
|
))}
|
|
</nav>
|
|
)
|
|
}
|