Stats Card

1import * as React from "react";
2import { ArrowDownRight, ArrowUpRight, Minus } from "lucide-react";
3import { Card, CardContent, type CardProps } from "@/components/ui/atoms/card";
4import { cn } from "@/lib/utils";
5 
6export interface StatsCardProps extends CardProps {
7  icon?: React.ReactNode;
8  label: string;
9  value: string | number;
10  trend?: "up" | "down" | "neutral";
11  trendValue?: string;
12  chart?: React.ReactNode;
13}
14const StatsCard = React.forwardRef<HTMLDivElement, StatsCardProps>(
15  ({ chart, className, icon, label, trend = "neutral", trendValue, value, ...props }, ref) => {
16    const TrendIcon = trend === "up" ? ArrowUpRight : trend === "down" ? ArrowDownRight : Minus;
17    return (
18      <Card ref={ref} className={cn("group", className)} {...props}>
19        <CardContent className="p-5">
20          <div className="flex items-start justify-between">
21            <span className="text-xs font-medium text-muted-foreground">{label}</span>
22            {icon && (
23              <span className="flex size-9 items-center justify-center rounded-lg bg-surface-subtle text-primary transition-transform group-hover:scale-105">
24                {icon}
25              </span>
26            )}
27          </div>
28          <div className="mt-3 text-3xl font-bold tracking-tight">{value}</div>
29          {trendValue && (
30            <div
31              className={cn(
32                "mt-1.5 flex items-center gap-1 text-xs font-medium",
33                trend === "up" && "text-success-icon",
34                trend === "down" && "text-destructive",
35                trend === "neutral" && "text-muted-foreground",
36              )}
37            >
38              <TrendIcon className="size-3.5" />
39              {trendValue}
40            </div>
41          )}
42          {chart && <div className="mt-4 h-14 text-primary">{chart}</div>}
43        </CardContent>
44      </Card>
45    );
46  },
47);
48StatsCard.displayName = "StatsCard";
49export { StatsCard };