credits

1 files changed, 12 insertions, 1 deletions

diff --git a/src/views/App.js b/src/views/App.js
index 6734c21..8c8722b 100644
--- a/src/views/App.js
+++ b/src/views/App.js
@@ -8,6 +8,9 @@ import { MTLLoader, OBJLoader } from "@hbis/three-obj-mtl-loader";
 
 import Detail from "./Detail.js";
 import Legend from "./Legend.js";
+import Quote from "./Quote.js";
+import Credits from "./Credits.js";
+import Title from "./Title.js";
 import buildGraph from "../graph.js";
 
 export default function App() {
@@ -16,6 +19,7 @@ export default function App() {
   const [graph, setGraph] = useState(null);
   const [selectedCategory, setSelectedCategory] = useState(null);
   const [detailVisible, setDetailVisible] = useState(null);
+  const [creditsVisible, setCreditsVisible] = useState(true);
 
   /** Load the database */
   useEffect(async () => {
@@ -58,10 +62,17 @@ export default function App() {
     <div>
       <Detail node={node} visible={detailVisible} onClose={handleClose} />
       <Legend
-        visible={!detailVisible}
+        visible={!detailVisible && !creditsVisible}
         selected={selectedCategory}
         onSelect={handleSelect}
       />
+      <Quote visible={!detailVisible && !creditsVisible} />
+      <Credits
+        onToggle={setCreditsVisible}
+        visible={!detailVisible}
+        open={creditsVisible}
+      />
+      <Title visible={!detailVisible && !creditsVisible} />
     </div>
   );
 }