Stat Card

import { StatCard } from "@/components/ui/stat-card";

export default function Example() {
  return <StatCard />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const StatCard = forwardRef(({ className, title, value, description, icon, trend, ...props }, ref) => (
  <div ref={ref} className={cn("rounded-lg border bg-card p-6 text-card-foreground shadow-sm", className)} {...props}>
    <div className="flex items-center justify-between">
      <span className="text-sm font-medium text-muted-foreground">{title}</span>
      {icon && <span className="text-muted-foreground">{icon}</span>}
    </div>
    <div className="mt-2 flex items-baseline gap-2">
      <span className="text-2xl font-bold">{value}</span>
      {trend && (
        <span className={cn("text-xs font-medium", trend > 0 ? "text-green-600" : "text-red-600")}>
          {trend > 0 ? "↑" : "↓"} {Math.abs(trend)}%
        </span>
      )}
    </div>
    {description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
  </div>
));
StatCard.displayName = "StatCard";

export { StatCard };