Compact summary

import {
  Badge,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Metric,
  MetricDelta,
  MetricLabel,
  MetricValue,
} from "@cooud-ui/ui";

export function StatsCompactBlock() {
  const stats = [
    { label: "Net revenue", value: "$128.4k", delta: "+18.2%", trend: "up" as const },
    { label: "New accounts", value: "1,482", delta: "+9.7%", trend: "up" as const },
    { label: "Expansion", value: "$24.1k", delta: "+4.1%", trend: "up" as const },
  ];

  return (
    <Card>
      <CardHeader className="flex-row items-center justify-between gap-3">
        <div>
          <CardTitle className="font-display text-lg">Growth snapshot</CardTitle>
          <p className="mt-1 text-sm text-fg-secondary">Last 30 days</p>
        </div>
        <Badge variant="success">On track</Badge>
      </CardHeader>
      <CardContent className="grid gap-5 sm:grid-cols-3">
        {stats.map(({ label, value, delta, trend }) => (
          <Metric key={label} className="gap-1.5">
            <MetricLabel>{label}</MetricLabel>
            <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
              <MetricValue className="text-3xl">{value}</MetricValue>
              <MetricDelta trend={trend}>{delta}</MetricDelta>
            </div>
          </Metric>
        ))}
      </CardContent>
    </Card>
  );
}