Export and delete

"use client";
import * as React from "react";
import { Trash2 } from "lucide-react";
import { DeleteWorkspaceDialog, ExportEverything, makeExporter } from "@/components/ui/notchset/blocks/delete-workspace";
import { Button } from "@/components/ui/notchset/button";
import { SettingsGroup, SettingsRow } from "@/components/ui/notchset/blocks/settings-layout";

/* The demo's export: a small file made after a short wait, as a server's would be. */
const exporter = makeExporter(
  async () => {
    await new Promise((r) => setTimeout(r, 700));
    return new Blob([JSON.stringify({ workspace: "Notchset", companies: 184, people: 1240, deals: 312, exported: "27 Oct" })], { type: "application/json" });
  },
  () => "notchset-export-27-oct.json",
);

export default function DeleteWorkspaceDemo() {
  const [open, setOpen] = React.useState(false);
  const [gone, setGone] = React.useState(false);
  return (
    <div className="w-full">
      <SettingsGroup title="Your data" hint="Everything you can see in Notchset, yours to take with you.">
        <SettingsRow label="Export everything" hint="Companies, people, deals, activity and files, as one file.">
          <ExportEverything exporter={exporter} />
        </SettingsRow>
        <SettingsRow label={gone ? "Notchset was deleted" : "Delete Notchset"} hint={gone ? "In this demo it comes back: Start over." : "2,184 records and the access of 8 people, for good."}>
          {gone ? (
            <Button size="sm" onClick={() => (setGone(false), exporter.reset())}>
              Start over
            </Button>
          ) : (
            <Button size="sm" variant="ghost" className="text-[var(--ns-bad-ink)]" onClick={() => setOpen(true)}>
              <Trash2 />
              Delete workspace
            </Button>
          )}
        </SettingsRow>
      </SettingsGroup>
      <DeleteWorkspaceDialog
        open={open}
        onOpenChange={setOpen}
        name="Notchset"
        what="2,184 records, their files and the access of 8 people, for good. Your export stays yours."
        exporter={exporter}
        after="The plan ends today; the last invoice is not refunded."
        onDelete={() => setGone(true)}
      />
    </div>
  );
}