FieldDialog

import { useState } from "react";
import { Button, FieldDialog } from "@hackcove/ui";

function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        New project
      </Button>
      {open && (
        <FieldDialog
          title="New project"
          description="Projects hold your builds and their reviews."
          label="Name"
          inputLabel="Project name"
          placeholder="my-project"
          hint="Letters, numbers and dashes."
          emptyReason="Type a name first."
          submit="Create"
          busyLabel="Creating…"
          onSubmit={() => new Promise((resolve) => setTimeout(resolve, 600))}
          onClose={() => setOpen(false)}
        />
      )}
    </>
  );
}

import { useState } from "react";
import { Button, Dialog, Field, Input } from "@hackcove/ui";

function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        New project
      </Button>
      {open && (
        <Dialog
          title="New project"
          onClose={() => setOpen(false)}
          footer={<Button onClick={() => setOpen(false)}>Create</Button>}
        >
          <Field label="Name" htmlFor="project-name">
            <Input id="project-name" placeholder="my-project" />
          </Field>
        </Dialog>
      )}
    </>
  );
}