e04816cfe5
Extract components and hooks from 4 oversized pages (518–508 LOC each) to bring each page.tsx under 300 LOC (hard cap 500). Zero behavior changes. - dsr/new: TypeSelector, SourceSelector → _components/; useNewDSRForm → _hooks/ - compliance-hub: QuickActions, StatsRow, DomainChart, MappingsAndFindings, RegulationsTable → _components/; useComplianceHub → _hooks/ - iace/[projectId]/monitoring: Badges, EventForm, ResolveModal, TimelineEvent → _components/; useMonitoring → _hooks/ - cookie-banner: BannerPreview, CategoryCard → _components/; useCookieBanner → _hooks/ Result: page.tsx LOC: dsr/new=259, compliance-hub=95, monitoring=157, cookie-banner=212 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
63 lines
2.7 KiB
TypeScript
63 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { Regulation } from '../_hooks/useComplianceHub'
|
|
|
|
export function RegulationsTable({
|
|
regulations,
|
|
onRefresh,
|
|
}: {
|
|
regulations: Regulation[]
|
|
onRefresh: () => void
|
|
}) {
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-sm border overflow-hidden">
|
|
<div className="p-4 border-b flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-slate-900">Verordnungen & Standards ({regulations.length})</h3>
|
|
<button onClick={onRefresh} className="text-sm text-purple-600 hover:text-purple-700">
|
|
Aktualisieren
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Code</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Typ</th>
|
|
<th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Anforderungen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
{regulations.slice(0, 15).map((reg) => (
|
|
<tr key={reg.id} className="hover:bg-slate-50">
|
|
<td className="px-4 py-3">
|
|
<span className="font-mono font-medium text-purple-600">{reg.code}</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<p className="font-medium text-slate-900">{reg.name}</p>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`px-2 py-1 text-xs rounded-full ${
|
|
reg.regulation_type === 'eu_regulation' ? 'bg-blue-100 text-blue-700' :
|
|
reg.regulation_type === 'eu_directive' ? 'bg-purple-100 text-purple-700' :
|
|
reg.regulation_type === 'bsi_standard' ? 'bg-green-100 text-green-700' :
|
|
'bg-slate-100 text-slate-700'
|
|
}`}>
|
|
{reg.regulation_type === 'eu_regulation' ? 'EU-VO' :
|
|
reg.regulation_type === 'eu_directive' ? 'EU-RL' :
|
|
reg.regulation_type === 'bsi_standard' ? 'BSI' :
|
|
reg.regulation_type === 'de_law' ? 'DE' : reg.regulation_type}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className="font-medium">{reg.requirement_count}</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|