Load error

"use client";
import * as React from "react";
import { LoadError } from "@/components/ui/notchset/blocks/load-error";
import { Button } from "@/components/ui/notchset/button";
import { opError } from "@/components/ui/notchset/operation";

/* the demo's server is down for one more try, then answers; a real app passes useOperation's error and retry */
export default function LoadErrorDemo() {
  const [tries, setTries] = React.useState(0);
  const [loaded, setLoaded] = React.useState(false);
  const error = tries === 0 ? opError("unavailable", undefined, { status: 503, detail: "7f3a91" }) : opError("network");
  const retry = () =>
    new Promise<void>((done, fail) =>
      setTimeout(() => {
        if (tries === 0) {
          setTries(1);
          fail(new TypeError("Failed to fetch"));
        } else {
          setLoaded(true);
          done();
        }
      }, 900),
    );
  return (
    <div className="flex w-full max-w-[560px] flex-col rounded-[var(--ns-radius-lg)] bg-[var(--ns-panel)] shadow-[0_0_0_1px_var(--ns-line)]">
      {loaded ? (
        <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 text-[var(--ns-ink-2)]">
          Your workspace loaded.
          <Button size="sm" onClick={() => (setLoaded(false), setTries(0))}>
            Fail it again
          </Button>
        </div>
      ) : (
        <LoadError title="Couldn't load your workspace" error={error} onRetry={retry} statusUrl="https://status.example.com" />
      )}
    </div>
  );
}