53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Card } from './Card';
|
|
import { Text } from './Text';
|
|
|
|
interface StatCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
icon?: ReactNode;
|
|
variant?: 'blue' | 'purple' | 'green' | 'orange';
|
|
className?: string;
|
|
}
|
|
|
|
export function StatCard({
|
|
label,
|
|
value,
|
|
icon,
|
|
variant = 'blue',
|
|
className = ''
|
|
}: StatCardProps) {
|
|
const variantClasses = {
|
|
blue: 'bg-gradient-to-br from-blue-900/20 to-blue-700/10 border-blue-500/30',
|
|
purple: 'bg-gradient-to-br from-purple-900/20 to-purple-700/10 border-purple-500/30',
|
|
green: 'bg-gradient-to-br from-green-900/20 to-green-700/10 border-green-500/30',
|
|
orange: 'bg-gradient-to-br from-orange-900/20 to-orange-700/10 border-orange-500/30'
|
|
};
|
|
|
|
const iconColorClasses = {
|
|
blue: 'text-blue-400',
|
|
purple: 'text-purple-400',
|
|
green: 'text-green-400',
|
|
orange: 'text-orange-400'
|
|
};
|
|
|
|
return (
|
|
<Card className={`${variantClasses[variant]} ${className}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Text size="sm" color="text-gray-400" className="mb-1">
|
|
{label}
|
|
</Text>
|
|
<Text size="3xl" weight="bold" color="text-white">
|
|
{value}
|
|
</Text>
|
|
</div>
|
|
{icon && (
|
|
<div className={iconColorClasses[variant]}>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |