Dialog

function Form() {
  const [open, setOpen] = useState(false);
  const create = () => {
    setOpen(false);
    toast.success("Key created");
  };
  return (
    <>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        trigger={<Button variant="primary">Create key</Button>}
        title="Create key"
        description="Applications use this key to call the gateway."
        onSubmit={create}
        footer={
          <>
            <Dialog.Close>
              <Button>Cancel</Button>
            </Dialog.Close>
            <Button variant="primary" onClick={create} shortcut={["mod", "enter"]}>
              Create key
            </Button>
          </>
        }
      >
        <div className="flex flex-col gap-20">
          <Input label="Name" placeholder="checkout-web" autoFocus />
          <Select
            label="Expires"
            options={[
              { value: "never", label: "Never" },
              { value: "90", label: "In 90 days" },
            ]}
            defaultValue="90"
            fullWidth
          />
        </div>
      </Dialog>
    </>
  );
}