48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { Card, CardContent } from '@/components/ui/card';
|
|
import { cn } from '@/lib/utils';
|
|
import { LucideIcon, TrendingDown, TrendingUp } from 'lucide-react';
|
|
|
|
interface Props {
|
|
icon: LucideIcon;
|
|
label: string;
|
|
value: string | number;
|
|
trend?: {
|
|
value: number;
|
|
isPositive: boolean;
|
|
};
|
|
className?: string;
|
|
}
|
|
|
|
const ExamStatsCard = ({ icon: Icon, label, value, trend, className }: Props) => {
|
|
return (
|
|
<Card className={cn(className)}>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg">
|
|
<Icon className="text-primary h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">{label}</p>
|
|
<p className="text-2xl font-bold text-gray-900">{value}</p>
|
|
</div>
|
|
</div>
|
|
{trend && (
|
|
<div
|
|
className={cn(
|
|
'flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium',
|
|
trend.isPositive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700',
|
|
)}
|
|
>
|
|
{trend.isPositive ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
|
|
{Math.abs(trend.value)}%
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ExamStatsCard;
|