0b37c5e692
Website (14 monoliths split): - compliance/page.tsx (1,519 → 9), docs/audit (1,262 → 20) - quality (1,231 → 16), alerts (1,203 → 10), docs (1,202 → 11) - i18n.ts (1,173 → 8 language files) - unity-bridge (1,094 → 12), backlog (1,087 → 6) - training (1,066 → 8), rag (1,063 → 8) - Deleted index_original.ts (4,899 LOC dead backup) Studio-v2 (5 monoliths split): - meet/page.tsx (1,481 → 9), messages (1,166 → 9) - AlertsB2BContext.tsx (1,165 → 5 modules) - alerts-b2b/page.tsx (1,019 → 6), korrektur/archiv (1,001 → 6) All existing imports preserved. Zero new TypeScript errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
export function MetricCard({
|
|
title,
|
|
value,
|
|
subtitle,
|
|
trend,
|
|
color = 'blue',
|
|
}: {
|
|
title: string
|
|
value: string | number
|
|
subtitle?: string
|
|
trend?: 'up' | 'down' | 'stable'
|
|
color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple'
|
|
}) {
|
|
const colorClasses = {
|
|
blue: 'bg-blue-50 border-blue-200',
|
|
green: 'bg-emerald-50 border-emerald-200',
|
|
red: 'bg-red-50 border-red-200',
|
|
yellow: 'bg-amber-50 border-amber-200',
|
|
purple: 'bg-purple-50 border-purple-200',
|
|
}
|
|
|
|
const trendIcons = {
|
|
up: (
|
|
<svg className="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
|
|
</svg>
|
|
),
|
|
down: (
|
|
<svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
|
</svg>
|
|
),
|
|
stable: (
|
|
<svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14" />
|
|
</svg>
|
|
),
|
|
}
|
|
|
|
return (
|
|
<div className={`rounded-xl border p-5 ${colorClasses[color]}`}>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-600">{title}</p>
|
|
<p className="mt-1 text-2xl font-bold text-slate-900">{value}</p>
|
|
{subtitle && <p className="mt-1 text-xs text-slate-500">{subtitle}</p>}
|
|
</div>
|
|
{trend && <div className="mt-1">{trendIcons[trend]}</div>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|