0125199c76
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>
26 lines
1.1 KiB
TypeScript
26 lines
1.1 KiB
TypeScript
import { CheckCircle2, Lock } from 'lucide-react'
|
|
|
|
const USAGE_CONFIG: Record<string, { bg: string; label: string }> = {
|
|
allowed: { bg: 'bg-green-100 text-green-800', label: 'Erlaubt' },
|
|
restricted: { bg: 'bg-yellow-100 text-yellow-800', label: 'Eingeschraenkt' },
|
|
prohibited: { bg: 'bg-red-100 text-red-800', label: 'Verboten' },
|
|
unclear: { bg: 'bg-gray-100 text-gray-600', label: 'Unklar' },
|
|
yes: { bg: 'bg-green-100 text-green-800', label: 'Ja' },
|
|
no: { bg: 'bg-red-100 text-red-800', label: 'Nein' },
|
|
'n/a': { bg: 'bg-gray-100 text-gray-400', label: 'k.A.' },
|
|
}
|
|
|
|
export function UsageBadge({ value }: { value: string }) {
|
|
const c = USAGE_CONFIG[value] || USAGE_CONFIG.unclear
|
|
return <span className={`inline-flex px-1.5 py-0.5 rounded text-xs font-medium ${c.bg}`}>{c.label}</span>
|
|
}
|
|
|
|
export function PermBadge({ label, allowed }: { label: string; allowed: boolean }) {
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
{allowed ? <CheckCircle2 className="w-3 h-3 text-green-500" /> : <Lock className="w-3 h-3 text-red-400" />}
|
|
<span className={`text-xs ${allowed ? 'text-green-700' : 'text-red-500'}`}>{label}</span>
|
|
</div>
|
|
)
|
|
}
|