Files
breakpilot-compliance/admin-compliance/app/sdk/architecture/_components/ArchHeader.tsx
Sharang Parnerkar 76962a2831 refactor(admin): split architecture page.tsx into colocated components
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>
2026-04-14 22:57:28 +02:00

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>
)
}