DOCX Viewer

"use client";

import { DocxViewer } from "@/components/f-ui/docx-viewer/docx-viewer";
import { DocumentDemoWhenVisible } from "@/demos/document-demo-when-visible";

/** Local fixture pinned from Extend UI `bca60b9e204ef0db248466dfa44367ad4c23d404`. */
const DEMO_DOCX = "/demo-documents/demo.docx";

export function DocxViewerDemo() {
  return (
    <DocumentDemoWhenVisible>
      <div className="h-[560px] overflow-hidden rounded-xl border">
        <DocxViewer
          fileName="demo.docx"
          src={DEMO_DOCX}
          engineOptions={{ wasmUrl: "/vendor/docx_wasm_bg.wasm" }}
        />
      </div>
    </DocumentDemoWhenVisible>
  );
}

"use client";

import { useEffect, useState } from "react";

import { DocxViewer } from "@/components/f-ui/docx-viewer/docx-viewer";
import { Button } from "@/components/ui/button";

/**
 * Recipe: fetch with auth headers, then pass a Blob/File as `src`.
 * Demo uses the same-origin Extend-pinned fixture so it stays offline-friendly.
 */
const DEMO_DOCX = "/demo-documents/demo.docx";

export function DocxViewerAuthenticatedBlobDemo() {
  const [blob, setBlob] = useState<Blob | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const load = async () => {
    setLoading(true);
    setError(null);
    try {
      // In production, pass Authorization / credentials here.
      const response = await fetch(DEMO_DOCX, {
        headers: {
          // "Authorization": "Bearer <token>",
        },
      });
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      setBlob(await response.blob());
    } catch (err) {
      setBlob(null);
      setError(err instanceof Error ? err.message : "Failed to load");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void load();
  }, []);

  return (
    <div className="space-y-3">
      <div className="flex flex-wrap items-center gap-2">
        <Button
          disabled={loading}
          onClick={() => void load()}
          type="button"
          variant="outline"
        >
          {loading ? "Loading…" : "Reload as Blob"}
        </Button>
        {error ? (
          <p className="text-destructive text-sm">{error}</p>
        ) : null}
      </div>
      {blob ? (
        <div className="h-[560px] overflow-hidden rounded-xl border">
          <DocxViewer
            fileName="demo.docx"
            src={blob}
            engineOptions={{ wasmUrl: "/vendor/docx_wasm_bg.wasm" }}
          />
        </div>
      ) : (
        <p className="text-muted-foreground text-sm">
          Fetching document as Blob…
        </p>
      )}
    </div>
  );
}

"use client";

import { useDocxViewer } from "@/components/f-ui/docx-viewer/use-docx-viewer";

/** Local fixture pinned from Extend UI `bca60b9e204ef0db248466dfa44367ad4c23d404`. */
const DEMO_DOCX = "/demo-documents/demo.docx";

export function DocxViewerHeadlessDemo() {
  const {
    state,
    retry,
    setActivePage,
    setZoomScale,
    setSidebarOpen,
    download,
  } = useDocxViewer({ src: DEMO_DOCX, fileName: "demo.docx" });

  return (
    <div>
      <p>displayFileName: {state.displayFileName}</p>
      <p>loading: {state.isLoadingSource ? "yes" : "no"}</p>
      <p>
        loadError:{" "}
        {state.loadError ? state.loadError.message : "—"}
      </p>
      <p>legacyDoc: {state.isLegacyDoc ? "yes" : "no"}</p>
      <p>
        activePage: {state.activePage} · zoom: {state.zoomScale} · sidebar:{" "}
        {state.sidebarOpen ? "open" : "closed"}
      </p>
      <p>
        file:{" "}
        {state.file
          ? `${state.file.name} (${state.file.size} bytes)`
          : "—"}
      </p>
      <div>
        <button
          onClick={() => setActivePage(Math.max(1, state.activePage - 1))}
          type="button"
        >
          Prev page
        </button>{" "}
        <button
          onClick={() => setActivePage(state.activePage + 1)}
          type="button"
        >
          Next page
        </button>{" "}
        <button onClick={() => setZoomScale((z) => z + 0.25)} type="button">
          Zoom in
        </button>{" "}
        <button
          onClick={() => setSidebarOpen((open) => !open)}
          type="button"
        >
          Toggle sidebar
        </button>{" "}
        <button onClick={() => retry()} type="button">
          Retry
        </button>{" "}
        <button
          onClick={() => {
            void download();
          }}
          type="button"
        >
          Download
        </button>
      </div>
    </div>
  );
}