Dialog

import { Button } from "@etched/reticle/button";
import { Combobox } from "@etched/reticle/combobox";
import { Input } from "@etched/reticle/input";
import { Select } from "@etched/reticle/select";
import { Dialog, DialogActions, DialogClose, DialogDescription, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "@etched/reticle/dialog";

export function Dialogs() {
  return (
    <div className="row">
      <DialogRoot>
        <DialogTrigger render={<Button variant="primary">Assign owner</Button>} />
        <Dialog size="lg">
          <DialogHeader close>Assign owner</DialogHeader>
          <DialogDescription>The owner gets alerts for chip SH-24A-0193.</DialogDescription>
          <Select label="Owner" items={{ ana: "Ana Ruiz", sam: "Sam Lee", kai: "Kai Ito" }} placeholder="Choose an owner" />
          <Combobox
            label="Reviewer"
            items={[
              { value: "ana", label: "Ana Ruiz" },
              { value: "sam", label: "Sam Lee" },
            ]}
            placeholder="Choose a reviewer"
          />
          <Input label="Note" placeholder="Optional note for the owner" />
          <DialogActions>
            <DialogClose render={<Button>Cancel</Button>} />
            <DialogClose render={<Button variant="primary">Assign</Button>} />
          </DialogActions>
        </Dialog>
      </DialogRoot>

      <DialogRoot role="alertdialog">
        <DialogTrigger render={<Button variant="secondary-destructive">Delete run</Button>} />
        <Dialog size="sm">
          <DialogTitle>Delete run 1,284?</DialogTitle>
          <DialogDescription>Its results and logs are deleted too. You cannot undo this.</DialogDescription>
          <DialogActions>
            <DialogClose render={<Button>Cancel</Button>} />
            <DialogClose render={<Button variant="destructive">Delete</Button>} />
          </DialogActions>
        </Dialog>
      </DialogRoot>
    </div>
  );
}

import { useState } from "react";
import { Button } from "@etched/reticle/button";
import { Input } from "@etched/reticle/input";
import { Dialog, DialogActions, DialogClose, DialogHeader, DialogRoot, DialogTrigger } from "@etched/reticle/dialog";

export function Saving() {
  const [open, setOpen] = useState(false);
  const [busy, setBusy] = useState(false);

  const save = () => {
    setBusy(true);
    setTimeout(() => {
      setBusy(false);
      setOpen(false);
    }, 1200);
  };

  return (
    <DialogRoot open={open} onOpenChange={(next) => busy || setOpen(next)}>
      <DialogTrigger render={<Button>Rename trace</Button>} />
      <Dialog>
        <DialogHeader close closeDisabled={busy}>
          Rename trace
        </DialogHeader>
        <Input label="Name" defaultValue="Thermal soak, lot 7801" />
        <DialogActions>
          <DialogClose disabled={busy} render={<Button>Cancel</Button>} />
          <Button variant="primary" loading={busy} onClick={save}>
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </DialogRoot>
  );
}