From c7a7296d01d8f0da3e44f1db82e08f573d03b7d6 Mon Sep 17 00:00:00 2001
From: Damian Cyntler <damian@cyntler.com>
Date: Wed, 28 Sep 2022 14:15:45 +0200
Subject: [PATCH] Add demo app navigation

---
 src/demoapp/DemoApp.tsx                       | 35 +++++++++++++++++++
 src/demoapp/{ => demos}/DocViewerApp.tsx      | 10 +++---
 .../{ => demos}/DocViewerWithInputApp.tsx     |  4 +--
 src/demoapp/index.tsx                         | 10 ++----
 4 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 src/demoapp/DemoApp.tsx
 rename src/demoapp/{ => demos}/DocViewerApp.tsx (80%)
 rename src/demoapp/{ => demos}/DocViewerWithInputApp.tsx (87%)

diff --git a/src/demoapp/DemoApp.tsx b/src/demoapp/DemoApp.tsx
new file mode 100644
index 00000000..0b558559
--- /dev/null
+++ b/src/demoapp/DemoApp.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { Link, Navigate } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import DocViewerApp from "./demos/DocViewerApp";
+import DocViewerWithInputApp from "./demos/DocViewerWithInputApp";
+
+const App = () => (
+  <BrowserRouter>
+    <h1>@cyntler/react-doc-viewer</h1>
+    <main>
+      <nav className="demo-app-nav">
+        <ul>
+          <li>
+            <Link to="/doc-viewer">Default</Link>
+          </li>
+          <li>
+            <Link to="/doc-viewer-with-input">With Input</Link>
+          </li>
+        </ul>
+      </nav>
+      <div className="demo-app-wrapper">
+        <Routes>
+          <Route path="/doc-viewer" element={<DocViewerApp />} />
+          <Route
+            path="/doc-viewer-with-input"
+            element={<DocViewerWithInputApp />}
+          />
+          <Route path="*" element={<Navigate to="/doc-viewer" replace />} />
+        </Routes>
+      </div>
+    </main>
+  </BrowserRouter>
+);
+
+export default App;
diff --git a/src/demoapp/DocViewerApp.tsx b/src/demoapp/demos/DocViewerApp.tsx
similarity index 80%
rename from src/demoapp/DocViewerApp.tsx
rename to src/demoapp/demos/DocViewerApp.tsx
index 644f8712..57e4bf37 100644
--- a/src/demoapp/DocViewerApp.tsx
+++ b/src/demoapp/demos/DocViewerApp.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import DocViewer from "../index";
-import { DocViewerRenderers } from "../plugins";
+import DocViewer from "../../index";
+import { DocViewerRenderers } from "../../plugins";
 
 const DocViewerApp = () => {
   const docs = [
-    { uri: require("./exampleFiles/pdf-file.pdf") },
-    { uri: require("./exampleFiles/png-image.png") },
-    { uri: require("./exampleFiles/csv-file.csv") },
+    { uri: require("../exampleFiles/pdf-file.pdf") },
+    { uri: require("../exampleFiles/png-image.png") },
+    { uri: require("../exampleFiles/csv-file.csv") },
   ];
 
   return (
diff --git a/src/demoapp/DocViewerWithInputApp.tsx b/src/demoapp/demos/DocViewerWithInputApp.tsx
similarity index 87%
rename from src/demoapp/DocViewerWithInputApp.tsx
rename to src/demoapp/demos/DocViewerWithInputApp.tsx
index 701731f6..03e62707 100644
--- a/src/demoapp/DocViewerWithInputApp.tsx
+++ b/src/demoapp/demos/DocViewerWithInputApp.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import DocViewer from "../index";
-import { DocViewerRenderers } from "../plugins";
+import DocViewer from "../../index";
+import { DocViewerRenderers } from "../../plugins";
 
 const DocViewerWithInputApp = () => {
   const [selectedDocs, setSelectedDocs] = useState<File[]>([]);
diff --git a/src/demoapp/index.tsx b/src/demoapp/index.tsx
index b7d3793a..d6f88451 100644
--- a/src/demoapp/index.tsx
+++ b/src/demoapp/index.tsx
@@ -1,11 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-
-// import DocViewerApp from "./DocViewerApp";
-import DocViewerWithInputApp from "./DocViewerWithInputApp";
+import App from "./DemoApp";
 
 const rootElement = document.getElementById("root");
-if (rootElement) {
-  const root = createRoot(rootElement);
-  root.render(<DocViewerWithInputApp />);
-}
+const root = createRoot(rootElement!);
+root.render(<App />);