e3a1822883
All 5 files reduced below 500 LOC (hard cap) by extracting sub-components: - training/page.tsx: 780→278 LOC — imports existing _components/, adds BlocksSection - control-provenance/page.tsx: 739→145 LOC — extracts provenance-data.ts, ProvenanceHelpers, LicenseMatrix, SourceRegistry - iace/[projectId]/verification/page.tsx: 673→164 LOC — extracts VerificationForm, CompleteModal, SuggestEvidenceModal, VerificationTable - training/learner/page.tsx: 560→216 LOC — extracts AssignmentsList, ContentView, QuizView, CertificatesView - ControlDetail.tsx: 878→311 LOC — adds ControlSourceCitation, ControlTraceability, ControlRegulatorySection, ControlSimilarControls, ControlReviewActions siblings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
66 lines
3.2 KiB
TypeScript
66 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { CheckCircle2, Lock } from 'lucide-react'
|
|
|
|
export function UsageBadge({ value }: { value: string }) {
|
|
const 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.' },
|
|
}
|
|
const c = config[value] || 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>
|
|
)
|
|
}
|
|
|
|
export function MarkdownRenderer({ content }: { content: string }) {
|
|
let html = content
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
|
|
html = html.replace(
|
|
/^```[\w]*\n([\s\S]*?)^```$/gm,
|
|
(_m, code: string) => `<pre class="bg-gray-50 border rounded p-3 my-3 text-xs font-mono overflow-x-auto whitespace-pre">${code.trimEnd()}</pre>`
|
|
)
|
|
|
|
html = html.replace(
|
|
/^(\|.+\|)\n(\|[\s:|-]+\|)\n((?:\|.+\|\n?)*)/gm,
|
|
(_m, header: string, _sep: string, body: string) => {
|
|
const ths = header.split('|').filter((c: string) => c.trim()).map((c: string) =>
|
|
`<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase border-b">${c.trim()}</th>`
|
|
).join('')
|
|
const rows = body.trim().split('\n').map((row: string) => {
|
|
const tds = row.split('|').filter((c: string) => c.trim()).map((c: string) =>
|
|
`<td class="px-3 py-2 text-sm text-gray-700 border-b border-gray-100">${c.trim()}</td>`
|
|
).join('')
|
|
return `<tr>${tds}</tr>`
|
|
}).join('')
|
|
return `<table class="w-full border-collapse my-3 text-sm"><thead><tr>${ths}</tr></thead><tbody>${rows}</tbody></table>`
|
|
}
|
|
)
|
|
|
|
html = html.replace(/^### (.+)$/gm, '<h4 class="text-sm font-semibold text-gray-800 mt-4 mb-2">$1</h4>')
|
|
html = html.replace(/^## (.+)$/gm, '<h3 class="text-base font-semibold text-gray-900 mt-5 mb-2">$1</h3>')
|
|
html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
|
html = html.replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1 py-0.5 rounded text-xs font-mono">$1</code>')
|
|
html = html.replace(/^- (.+)$/gm, '<li class="ml-4 text-sm text-gray-700 list-disc">$1</li>')
|
|
html = html.replace(/((?:<li[^>]*>.*<\/li>\n?)+)/g, '<ul class="my-2 space-y-1">$1</ul>')
|
|
html = html.replace(/^(\d+)\. (.+)$/gm, '<li class="ml-4 text-sm text-gray-700 list-decimal">$2</li>')
|
|
html = html.replace(/^(?!<[hultdp]|$)(.+)$/gm, '<p class="text-sm text-gray-700 my-2">$1</p>')
|
|
|
|
return <div dangerouslySetInnerHTML={{ __html: html }} />
|
|
}
|