Each page.tsx exceeded the 500-LOC hard cap. Extracted components and hooks into colocated _components/ and _hooks/ directories; page.tsx is now a thin orchestrator. - controls/page.tsx: 944 → 180 LOC; extracted ControlCard, AddControlForm, LoadingSkeleton, TransitionErrorBanner, StatsCards, FilterBar, RAGPanel into _components/ and useControlsData, useRAGSuggestions into _hooks/; types into _types.ts - training/page.tsx: 780 → 288 LOC; extracted ContentTab (inline content generator tab) into _components/ContentTab.tsx - control-provenance/page.tsx: 739 → 122 LOC; extracted MarkdownRenderer, UsageBadge, PermBadge, LicenseMatrix, SourceRegistry into _components/; PROVENANCE_SECTIONS static data into _data/provenance-sections.ts - iace/[projectId]/verification/page.tsx: 673 → 196 LOC; extracted StatusBadge, VerificationForm, CompleteModal, SuggestEvidenceModal, VerificationTable into _components/ Zero behavior changes; logic relocated verbatim. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
57 lines
2.5 KiB
TypeScript
57 lines
2.5 KiB
TypeScript
import { UsageBadge } from './UsageBadge'
|
|
|
|
interface LicenseInfo {
|
|
license_id: string
|
|
name: string
|
|
terms_url: string | null
|
|
commercial_use: string
|
|
ai_training_restriction: string | null
|
|
tdm_allowed_under_44b: string | null
|
|
deletion_required: boolean
|
|
notes: string | null
|
|
}
|
|
|
|
export function LicenseMatrix({ licenses, loading }: { licenses: LicenseInfo[]; loading: boolean }) {
|
|
return (
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4">Lizenz-Matrix</h2>
|
|
<p className="text-sm text-gray-600 mb-4">Uebersicht aller Lizenzen mit ihren erlaubten Nutzungsarten.</p>
|
|
{loading ? (
|
|
<div className="animate-pulse h-32 bg-gray-100 rounded" />
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm border-collapse">
|
|
<thead>
|
|
<tr className="bg-gray-50">
|
|
<th className="text-left px-3 py-2 border-b font-medium text-gray-600">Lizenz</th>
|
|
<th className="text-left px-3 py-2 border-b font-medium text-gray-600">Kommerziell</th>
|
|
<th className="text-left px-3 py-2 border-b font-medium text-gray-600">AI-Training</th>
|
|
<th className="text-left px-3 py-2 border-b font-medium text-gray-600">TDM (§44b)</th>
|
|
<th className="text-left px-3 py-2 border-b font-medium text-gray-600">Loeschpflicht</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{licenses.map(lic => (
|
|
<tr key={lic.license_id} className="hover:bg-gray-50">
|
|
<td className="px-3 py-2 border-b">
|
|
<div className="font-medium text-gray-900">{lic.license_id}</div>
|
|
<div className="text-xs text-gray-500">{lic.name}</div>
|
|
</td>
|
|
<td className="px-3 py-2 border-b"><UsageBadge value={lic.commercial_use} /></td>
|
|
<td className="px-3 py-2 border-b"><UsageBadge value={lic.ai_training_restriction || 'n/a'} /></td>
|
|
<td className="px-3 py-2 border-b"><UsageBadge value={lic.tdm_allowed_under_44b || 'unclear'} /></td>
|
|
<td className="px-3 py-2 border-b">
|
|
{lic.deletion_required
|
|
? <span className="text-red-600 text-xs font-medium">Ja</span>
|
|
: <span className="text-green-600 text-xs font-medium">Nein</span>}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|