CmDialog

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

"use client";

import { useState } from "react";
import { CmButton, CmDialog, CmInput } from "cosmemilton-ui/client";
import { CmRow, CmStack } from "cosmemilton-ui/server";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <CmButton tone="primary" onClick={() => setOpen(true)}>
        Editar cliente
      </CmButton>
      <CmDialog
        open={open}
        onClose={() => setOpen(false)}
        title="Editar cliente"
        description="Atualize os dados principais do cadastro."
        size="lg"
        portal
        footer={
          <CmRow gap="sm" justify="end">
            <CmButton variant="ghost" onClick={() => setOpen(false)}>Cancelar</CmButton>
            <CmButton tone="primary" onClick={() => setOpen(false)}>Salvar</CmButton>
          </CmRow>
        }
      >
        <CmStack gap="md">
          <CmInput label="Razao social" defaultValue="Acme Ltda." />
          <CmInput label="E-mail financeiro" defaultValue="financeiro@acme.test" />
        </CmStack>
      </CmDialog>
    </>
  );
}