FormDialog

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

// A form dialog is a Dialog with a form in it. `Dialog` owns the scrim, the focus trap, the
// scroll lock and Escape; the form and its two buttons are the part that was ever specific to
// this screen, which is why the recipe that wrapped them is an example rather than a component.
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>
    </>
  );
}