Dialog

import { Button, Dialog, DialogBody, DialogFooter, FormGroup, HTMLSelect, InputGroup } from "@clawscale/react";
import { useState } from "react";

export default function DialogBasic() {
  const [isOpen, setIsOpen] = useState(false);
  const close = () => setIsOpen(false);
  return (
    <>
      <Button icon="time" text="Edit schedule" onClick={() => setIsOpen(true)} />
      <Dialog icon="time" isOpen={isOpen} onClose={close} title="Schedule ingest-orders">
        <DialogBody>
          <FormGroup helperText="Every day at 02:15." label="Cron expression" labelFor="schedule-cron">
            <InputGroup defaultValue="15 2 * * *" id="schedule-cron" />
          </FormGroup>
          <FormGroup label="Time zone" labelFor="schedule-zone">
            <HTMLSelect fill id="schedule-zone" options={["UTC", "Europe/Berlin", "America/New_York"]} />
          </FormGroup>
        </DialogBody>
        <DialogFooter
          actions={
            <>
              <Button text="Cancel" onClick={close} />
              <Button intent="primary" text="Save schedule" onClick={close} />
            </>
          }
        >
          Next run: 28 Sep, 02:15 UTC
        </DialogFooter>
      </Dialog>
    </>
  );
}

import { Button, Dialog, DialogBody, DialogFooter, HTMLTable } from "@clawscale/react";
import { useState } from "react";

const partitions = Array.from({ length: 90 }, (_, index) => ({
  day: new Date(Date.UTC(2026, 5, 30 + index)).toISOString().slice(0, 10),
  rows: (41_200 + index * 137).toLocaleString("en-US"),
}));

export default function DialogScrollable() {
  const [isOpen, setIsOpen] = useState(false);
  const close = () => setIsOpen(false);
  return (
    <>
      <Button icon="history" text="Review backfill" onClick={() => setIsOpen(true)} />
      <Dialog icon="history" isOpen={isOpen} onClose={close} title="Backfill orders_daily">
        <DialogBody>
          <HTMLTable compact striped style={{ width: "100%" }}>
            <thead>
              <tr>
                <th>Partition</th>
                <th>Rows</th>
              </tr>
            </thead>
            <tbody>
              {partitions.map((partition) => (
                <tr key={partition.day}>
                  <td>dt={partition.day}</td>
                  <td>{partition.rows}</td>
                </tr>
              ))}
            </tbody>
          </HTMLTable>
        </DialogBody>
        <DialogFooter actions={<Button intent="primary" text="Start backfill" onClick={close} />}>
          90 partitions, us-east-1
        </DialogFooter>
      </Dialog>
    </>
  );
}

import { Button, DialogBody, DialogStep, FormGroup, HTMLSelect, InputGroup, MultistepDialog } from "@clawscale/react";
import { useState } from "react";

export default function DialogMultistep() {
  const [isOpen, setIsOpen] = useState(false);
  const close = () => setIsOpen(false);
  const source = (
    <DialogBody>
      <FormGroup label="Source table" labelFor="pipeline-source">
        <HTMLSelect fill id="pipeline-source" options={["raw.orders", "raw.events", "raw.customers"]} />
      </FormGroup>
    </DialogBody>
  );
  const schedule = (
    <DialogBody>
      <FormGroup helperText="Every day at 02:15 UTC." label="Cron expression" labelFor="pipeline-cron">
        <InputGroup defaultValue="15 2 * * *" id="pipeline-cron" />
      </FormGroup>
    </DialogBody>
  );
  const review = (
    <DialogBody>
      <p>raw.orders loads into analytics.orders_daily every day at 02:15 UTC in us-east-1.</p>
    </DialogBody>
  );
  return (
    <>
      <Button icon="add" intent="primary" text="Create pipeline" onClick={() => setIsOpen(true)} />
      <MultistepDialog
        finalButtonProps={{ intent: "primary", text: "Create pipeline", onClick: close }}
        icon="data-lineage"
        isOpen={isOpen}
        onClose={close}
        title="New pipeline"
      >
        <DialogStep id="source" panel={source} title="Source" />
        <DialogStep id="schedule" panel={schedule} title="Schedule" />
        <DialogStep id="review" panel={review} title="Review" />
      </MultistepDialog>
    </>
  );
}