43 lines
1.7 KiB
JavaScript
43 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { cn } from '@/lib/utils';
|
|
import { TrendingUp, TrendingDown } from 'lucide-react';
|
|
|
|
/**
|
|
* Grid de KPIs compartilhada.
|
|
*/
|
|
export const StatsGrid = ({ stats }) => {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{stats.map((stat, index) => (
|
|
<Card key={index} className="overflow-hidden border-none shadow-sm bg-card hover:shadow-md transition-all">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start justify-between">
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium text-muted-foreground">{stat.label}</p>
|
|
<div className="flex items-baseline gap-2">
|
|
<h3 className="text-2xl font-bold tracking-tight">{stat.value}</h3>
|
|
{stat.trend && (
|
|
<span className={cn(
|
|
"text-xs font-bold flex items-center gap-0.5 px-1.5 py-0.5 rounded",
|
|
stat.negative ? "text-destructive bg-destructive/10" : "text-emerald-600 bg-emerald-100/50"
|
|
)}>
|
|
{stat.negative ? <TrendingDown size={12} /> : <TrendingUp size={12} />}
|
|
{stat.trend}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{stat.icon && (
|
|
<div className={cn("p-2.5 rounded-xl", stat.color || "bg-primary/10 text-primary")}>
|
|
{React.cloneElement(stat.icon, { size: 24 })}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|