CmTabs

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

import { CmTabs, CmTabsContent, CmTabsList, CmTabsTrigger } from "cosmemilton-ui/client";
import { CmStack, CmText } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmTabs defaultValue="profile" variant="folder">
      <CmTabsList>
        <CmTabsTrigger value="profile">Perfil</CmTabsTrigger>
        <CmTabsTrigger value="billing">Financeiro</CmTabsTrigger>
        <CmTabsTrigger value="security">Seguranca</CmTabsTrigger>
      </CmTabsList>
      <CmTabsContent value="profile">
        <CmStack gap="xs">
          <CmText weight="semibold">Dados do cliente</CmText>
          <CmText tone="muted">Nome, contatos e responsaveis.</CmText>
        </CmStack>
      </CmTabsContent>
      <CmTabsContent value="billing">
        <CmText tone="muted">Limites, cobrancas e notas fiscais.</CmText>
      </CmTabsContent>
      <CmTabsContent value="security">
        <CmText tone="muted">Usuarios, permissoes e MFA.</CmText>
      </CmTabsContent>
    </CmTabs>
  );
}