Metric

import { Badge } from "@/components/ui/badge";
import { Metric, MetricLabel, MetricValue } from "@/components/ui/metric";

export default function MetricGrid() {
  return (
    <div className="grid w-full grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-3">
      <Metric>
        <MetricLabel>Revenue</MetricLabel>
        <MetricValue>$48,210</MetricValue>
        <Badge variant="success">+12.4%</Badge>
      </Metric>
      <Metric>
        <MetricLabel>Active users</MetricLabel>
        <MetricValue>2,184</MetricValue>
        <Badge variant="success">+3.1%</Badge>
      </Metric>
      <Metric>
        <MetricLabel>Open tasks</MetricLabel>
        <MetricValue>37</MetricValue>
        <Badge variant="warning">+8 this week</Badge>
      </Metric>
      <Metric>
        <MetricLabel>Uptime</MetricLabel>
        <MetricValue>99.98%</MetricValue>
        <span className="text-xs text-faint">Last 30 days</span>
      </Metric>
    </div>
  );
}