JSON-DOC/examples/vite_basic/src/App.tsx at dfa7b9dc746fc105701338b5ce6fdc5f3bf17799 · textcortex/JSON-DOC · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { JsonDocRenderer, PageDelimiter } from "@textcortex/jsondoc";
import "@textcortex/jsondoc/dist/index.css";
import { useState } from "react";
import FileSelector from "./components/FileSelector";
import DevPanel from "./components/DevPanel";
import { useFileLoader } from "./hooks/useFileLoader";
import { AVAILABLE_FILES } from "./constants/files";

const App = () => {
  const [theme, setTheme] = useState<"light" | "dark">("dark");
  const [devMode, setDevMode] = useState(false);
  const [showBackrefs, setShowBackrefs] = useState(false);
  const {
    selectedFile,
    data: testPage,
    loading,
    error,
    handleFileChange,
  } = useFileLoader(AVAILABLE_FILES[0]);

  // uncomment to trigger error in renderer
  // if (testPage) {
  //   testPage.children = [undefined];
  // }

  // Get backrefs for the currently selected file
  const currentBackrefs = selectedFile?.backrefs || [];

  if (error) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100vh",
          color: theme === "dark" ? "oklch(90% 0 0)" : "oklch(10% 0 0)",
          background: theme === "dark" ? "oklch(20.5% 0 0)" : "oklch(95% 0 0)",
        }}
      >
        <div style={{ textAlign: "center" }}>
          <h2>Error Loading Document</h2>
          <p>{error}</p>
        </div>
      </div>
    );
  }

  if (!testPage && loading) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100vh",
          color: theme === "dark" ? "oklch(90% 0 0)" : "oklch(10% 0 0)",
          background: theme === "dark" ? "oklch(20.5% 0 0)" : "oklch(95% 0 0)",
        }}
      >
        Loading...
      </div>
    );
  }

  return (
    <div
      style={{
        background: theme === "dark" ? "oklch(20.5% 0 0)" : "oklch(95% 0 0)",
        minHeight: "100vh",
      }}
    >
      <FileSelector
        availableFiles={AVAILABLE_FILES}
        selectedFile={selectedFile}
        onFileChange={handleFileChange}
        loading={loading}
        theme={theme}
      />

      <DevPanel
        devMode={devMode}
        setDevMode={setDevMode}
        theme={theme}
        setTheme={setTheme}
        showBackrefs={showBackrefs}
        setShowBackrefs={setShowBackrefs}
      />

      <div
        style={{
          padding: "20px",
          maxWidth: "690px",
          margin: "0 auto",
          color: theme === "dark" ? "oklch(90% 0 0)" : "oklch(10% 0 0)",
          display: "flex",
          justifyContent: "center",
          paddingTop: 160,
        }}
      >
        {testPage && (
          <JsonDocRenderer
            page={testPage}
            theme={theme}
            devMode={devMode}
            backrefs={showBackrefs ? currentBackrefs : []}
            components={{
              page_delimiter: (props) => {
                return <PageDelimiter {...props} />;
              },
            }}
            pageOverride={{
              pageNum: 1,
              component: <p>hehe</p>,
            }}
          />
        )}
      </div>
    </div>
  );
};

export default App;