Stat Card

1import type React from "react";
2import { TrendBadge } from "@/registry/sol/trend-badge";
3import { Card } from "@/components/ui/card";
4import { cn } from "@/lib/utils";
5 
6interface StatCardProps extends React.ComponentProps<typeof Card> {
7  label: string;
8  value: string;
9  change?: string;
10  trend?: "up" | "down";
11  icon?: React.ReactNode;
12}
13 
14const StatCard = ({
15  label,
16  value,
17  change,
18  trend = "up",
19  icon,
20  className,
21  ...props
22}: StatCardProps) => {
23  return (
24    <Card className={cn("p-4 gap-2", className)} {...props}>
25      <div className="flex items-center justify-between">
26        <span className="text-sm text-muted-foreground">{label}</span>
27        {icon && <span className="text-muted-foreground">{icon}</span>}
28      </div>
29      <div className="flex items-end justify-between gap-2">
30        <span className="text-2xl font-semibold tracking-tight">{value}</span>
31        {change && <TrendBadge trend={trend}>{change}</TrendBadge>}
32      </div>
33    </Card>
34  );
35};
36 
37export type { StatCardProps };
38export { StatCard };