Extract DetailPanel, ArchHeader, Toolbar, ArchCanvas and ServiceTable into _components/, the ReactFlow node/edge builder into _hooks/useArchGraph, and layout constants/helpers into _layout.ts. page.tsx drops from 950 to 91 LOC, well below the 300 soft target. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
export default function ArchHeader({
|
|
stats,
|
|
}: {
|
|
stats: {
|
|
services: number
|
|
dbTables: number
|
|
ragCollections: number
|
|
edges: number
|
|
}
|
|
}) {
|
|
return (
|
|
<div className="bg-white rounded-xl border border-slate-200 p-5 shadow-sm">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-xl bg-slate-700 flex items-center justify-center text-white">
|
|
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
|
|
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold text-slate-900">
|
|
Architektur-Uebersicht
|
|
</h2>
|
|
<p className="text-sm text-slate-500">
|
|
{stats.services} Services | {stats.dbTables} DB-Tabellen | {stats.ragCollections} RAG-Collections | {stats.edges} Verbindungen
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|