Settings row

A destructive action at the end of a settings list, held instead of confirmed in a dialog.

Workspace

Workspace name: Ink and Paper
Members: 6 people
Default paper: Matte cotton, 310 g

Delete workspace

Removes every print, order and member after 7 days.

import { createHoldToConfirm } from "@reuse-sh/interactions";

// Space or Enter holds too. Escape or releasing early cancels.
createHoldToConfirm(document.querySelector("#delete-workspace"), {
  holdMs: 2000,
  onConfirm: () => scheduleDeletion(workspace.id),
});

import { HoldToConfirmButton } from "@reuse-sh/interactions/react";

export function DangerRow({ workspace }) {
  return (
    <div className="settings-row">
      <div>
        <b>Delete workspace</b>
        <p>Removes every print, order and member.</p>
      </div>
      <HoldToConfirmButton holdMs={2000} onConfirm={() => scheduleDeletion(workspace.id)}>
        Hold to delete
      </HoldToConfirmButton>
    </div>
  );
}