49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
export interface MetricCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
label: React.ReactNode;
|
|
value: React.ReactNode;
|
|
helper?: React.ReactNode;
|
|
trend?: React.ReactNode;
|
|
tone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
|
|
}
|
|
|
|
const toneClass: Record<NonNullable<MetricCardProps['tone']>, string> = {
|
|
neutral: 'text-[var(--bl-text-secondary)]',
|
|
success: 'text-[var(--bl-success)]',
|
|
warning: 'text-[var(--bl-warning)]',
|
|
danger: 'text-[var(--bl-danger)]',
|
|
info: 'text-[var(--bl-info,var(--bl-accent))]',
|
|
};
|
|
|
|
export function MetricCard({
|
|
label,
|
|
value,
|
|
helper,
|
|
trend,
|
|
tone = 'neutral',
|
|
className,
|
|
...props
|
|
}: MetricCardProps) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'rounded-xl border border-[var(--bl-border)] bg-[var(--bl-surface-card)] p-4 shadow-sm shadow-black/[0.03]',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.08em] text-[var(--bl-text-secondary)]">
|
|
{label}
|
|
</div>
|
|
<div className="mt-2 text-2xl font-semibold leading-8 text-[var(--bl-text-primary)]">
|
|
{value}
|
|
</div>
|
|
{(helper || trend) && (
|
|
<div className={clsx('mt-2 text-sm leading-5', toneClass[tone])}>{trend ?? helper}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|