Drawer

Sobreposição

Painel lateral para detalhe e edição. Ao abrir, o foco vai para o primeiro campo editável. Diálogo central é só para confirmação destrutiva.

Substitui no Brain:Painelpartners sheetui sheet

Painel de edição

"use client";

import { Button, Drawer, FormField, TextInput, toast } from "@paytime/ui";
import { useState } from "react";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Editar parceiro</Button>
      <Drawer
        open={open}
        onOpenChange={setOpen}
        title="Editar parceiro"
        description="Grau Técnico LTDA"
        footer={
          <>
            <Button tone="neutral" variant="outline" onClick={() => setOpen(false)}>Cancelar</Button>
            <span className="flex-1" />
            <Button onClick={() => { setOpen(false); toast.success("Parceiro salvo"); }}>Salvar</Button>
          </>
        }
      >
        <div className="flex flex-col gap-4">
          <FormField label="Razão social">
            <TextInput defaultValue="Grau Técnico LTDA" />
          </FormField>
          <FormField label="E-mail de contato">
            <TextInput defaultValue="contato@grautecnico.com.br" />
          </FormField>
        </div>
      </Drawer>
    </>
  );
}