37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
import { Card } from '@/components/ui/Card';
|
||
|
|
import { Badge, BadgeVariant } from '@/components/ui/Badge';
|
||
|
|
|
||
|
|
export interface StatCardProps {
|
||
|
|
label: string;
|
||
|
|
value: string | number;
|
||
|
|
change?: string;
|
||
|
|
changeVariant?: BadgeVariant;
|
||
|
|
icon?: React.ReactNode;
|
||
|
|
testId?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function StatCard({ label, value, change, changeVariant = 'success', icon, testId }: StatCardProps) {
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<div className="flex items-center justify-between" data-testid={testId}>
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-secondary-500">{label}</p>
|
||
|
|
<p className="text-2xl font-bold text-secondary-900 mt-1">{value}</p>
|
||
|
|
{change && (
|
||
|
|
<p className="text-xs mt-1">
|
||
|
|
<Badge variant={changeVariant} dot>{change}</Badge>
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{icon && (
|
||
|
|
<div className="w-12 h-12 rounded-lg bg-primary-50 flex items-center justify-center text-primary-600" aria-hidden="true">
|
||
|
|
{icon}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|