CmCarousel

import { CmCarousel } from "cosmemilton-ui/client";

import { CmCarousel } from "cosmemilton-ui/client";
import { CmBadge, CmStack, CmText } from "cosmemilton-ui/server";

const items = [
  {
    id: "closing",
    eyebrow: "Financeiro",
    title: "Fechamento mensal",
    description: "Confira pendencias antes da virada do periodo.",
    media: <CmBadge tone="warning">3 pendencias</CmBadge>,
  },
  {
    id: "audit",
    eyebrow: "Auditoria",
    title: "Novas regras fiscais",
    description: "Atualize os cadastros com NCM e CFOP revisados.",
    media: <CmBadge tone="info">Atualizacao</CmBadge>,
  },
  {
    id: "sales",
    eyebrow: "Comercial",
    title: "Meta em andamento",
    description: "A carteira atingiu 82% da meta do trimestre.",
    media: <CmBadge tone="success">82%</CmBadge>,
  },
];

export default function Example() {
  return (
    <CmStack gap="sm">
      <CmText tone="muted">Carrossel com controles e indicadores.</CmText>
      <CmCarousel items={items} height="260px" showControls showDots />
    </CmStack>
  );
}