CmMetricCard

import { CmMetricCard } from "cosmemilton-ui/server";

"use client";

import { CmGrid, CmGridContainer, CmMetricCard } from "cosmemilton-ui/server";

const metrics = [
  { title: "Receita", value: "R$ 84,2k", tone: "primary", trend: { value: 12, label: "vs. mes anterior" } },
  { title: "Pedidos", value: "1.248", tone: "success", trend: { value: 8, label: "novos" } },
  { title: "Atrasos", value: "17", tone: "danger", trend: { value: -4, label: "reduzidos" } },
] as const;

export default function Example() {
  return (
    <CmGridContainer columns={{ base: 1, md: 3 }} gap="md">
      {metrics.map((metric) => (
        <CmGrid key={metric.title}>
          <CmMetricCard
            title={metric.title}
            value={metric.value}
            tone={metric.tone}
            accent="top"
            trend={metric.trend}
            description="Periodo atual"
          />
        </CmGrid>
      ))}
    </CmGridContainer>
  );
}