68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
|
|
|
|
export interface StatCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
trend?: 'up' | 'down' | 'flat';
|
|
trendValue?: string;
|
|
icon?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function StatCard({ label, value, trend, trendValue, icon, className }: StatCardProps) {
|
|
const TrendIcon = trend === 'up' ? TrendingUp : trend === 'down' ? TrendingDown : Minus;
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'rounded-xl border p-5 shadow-sm shadow-black/[0.04]',
|
|
'bg-[var(--bl-surface-card,#1a1a2e)] border-[var(--bl-border,#2a2a4a)]',
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="mb-1 text-xs font-semibold uppercase tracking-[0.08em] text-[var(--bl-text-secondary,#a0a0b0)]">
|
|
{label}
|
|
</p>
|
|
<p className="text-2xl font-semibold tracking-tight text-[var(--bl-text-primary,#fff)]">
|
|
{value}
|
|
</p>
|
|
</div>
|
|
{icon && (
|
|
<div className="rounded-lg p-2 bg-[var(--bl-surface-muted,#252540)] text-[var(--bl-text-secondary,#a0a0b0)]">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{trend && trendValue && (
|
|
<div className="flex items-center gap-1 mt-3 text-xs">
|
|
<TrendIcon
|
|
size={14}
|
|
className={clsx(
|
|
trend === 'up' && 'text-[var(--bl-success,#34D399)]',
|
|
trend === 'down' && 'text-[var(--bl-danger,#FF6E6E)]',
|
|
trend === 'flat' && 'text-[var(--bl-text-secondary,#a0a0b0)]'
|
|
)}
|
|
/>
|
|
<span
|
|
className={clsx(
|
|
'font-medium',
|
|
trend === 'up' && 'text-[var(--bl-success,#34D399)]',
|
|
trend === 'down' && 'text-[var(--bl-danger,#FF6E6E)]',
|
|
trend === 'flat' && 'text-[var(--bl-text-secondary,#a0a0b0)]'
|
|
)}
|
|
>
|
|
{trendValue}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
StatCard.displayName = 'StatCard';
|