39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { TrendingUp, TrendingDown } from 'lucide-react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
interface MetricCardProps {
|
|
title: string;
|
|
value: string;
|
|
change: string;
|
|
changeType: 'up' | 'down';
|
|
description: string;
|
|
subtitle: string;
|
|
}
|
|
|
|
export function MetricCard({ title, value, change, changeType, description, subtitle }: MetricCardProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
|
|
<Badge
|
|
variant="outline"
|
|
className={`ml-auto px-2 py-1 transition-all duration-200 ${
|
|
changeType === 'up'
|
|
? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950 dark:text-emerald-300 dark:border-emerald-800 hover:bg-emerald-100 dark:hover:bg-emerald-900'
|
|
: 'bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800 hover:bg-red-100 dark:hover:bg-red-900'
|
|
}`}
|
|
>
|
|
{changeType === 'up' ? <TrendingUp className="w-3 h-3 mr-1" /> : <TrendingDown className="w-3 h-3 mr-1" />}
|
|
{change}
|
|
</Badge>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{value}</div>
|
|
<p className="text-sm font-medium text-foreground mt-1">{description}</p>
|
|
<p className="text-xs text-muted-foreground mt-1">{subtitle}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|