FormDialog

import { useState } from 'react';
import { Button, Dialog, Field, Group } from '@ilomee/aura-react';

// Форма в модалке — это Dialog с формой внутри. `Dialog` владеет затемнением, ловушкой фокуса,
// блокировкой прокрутки и Escape; форма и две кнопки — та часть, которая всегда была специфична для
// конкретного экрана, поэтому рецепт вокруг них стал примером, а не компонентом.
export default function Demo() {
  const [open, setOpen] = useState(true);
  const [name, setName] = useState('');

  return (
    <>
      <Button variant="primary" onClick={() => setOpen(true)}>
        New workspace
      </Button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title="New workspace"
        autoFocus={false}
        withCloseButton
      >
        <form
          onSubmit={(e) => {
            e.preventDefault();
            setOpen(false);
          }}
        >
          <Field label="Name" value={name} onValueChange={setName} placeholder="Acme" />
          <Group style={{ marginTop: 20, justifyContent: 'flex-end' }}>
            <Button type="button" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" variant="primary" disabled={!name}>
              Create
            </Button>
          </Group>
        </form>
      </Dialog>
    </>
  );
}