9ba420fa91
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 42s
CI / test-go-edu-search (push) Successful in 34s
CI / test-python-klausur (push) Failing after 2m51s
CI / test-python-agent-core (push) Successful in 21s
CI / test-nodejs-website (push) Successful in 29s
sed replacement left orphaned hostname references in story page and empty lines in getApiBase functions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
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>
|
|
)
|
|
}
|