credits

4 files changed, 170 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>
   );
 }
diff --git a/src/views/Credits.js b/src/views/Credits.js
new file mode 100644
index 0000000..9d8c43e
--- /dev/null
+++ b/src/views/Credits.js
@@ -0,0 +1,126 @@
+/**
+ * Credits
+ */
+
+import React from "react";
+
+export default function Credits({ visible, open, onToggle }) {
+  return (
+    <>
+      <div
+        className={visible ? "credits-link visible" : "credits-link"}
+        onClick={() => onToggle(true)}
+      >
+        Credits
+      </div>
+      <div className="inner">
+        <div className={open ? "credits visible" : "credits"}>
+          <div className="inner" onClick={(event) => event.stopPropagation()}>
+            <div className="row">
+              <div
+                className="column"
+                dangerouslySetInnerHTML={{ __html: CREDITS_STRINGS.site }}
+              />
+              <div
+                className="column"
+                dangerouslySetInnerHTML={{ __html: CREDITS_STRINGS.press }}
+              />
+              <div className="column">
+                <img
+                  className="close"
+                  src="/assets/img/close.svg"
+                  onClick={() => onToggle(false)}
+                />
+                <span
+                  dangerouslySetInnerHTML={{ __html: CREDITS_STRINGS.sponsors }}
+                />
+              </div>
+            </div>
+            <div className="row bibliography-title">
+              <h2>BIBLIOGRAPHY</h2>
+            </div>
+            <div className="bibliography">
+              <div
+                className="column"
+                dangerouslySetInnerHTML={{
+                  __html: CREDITS_STRINGS.bibliography1,
+                }}
+              />
+              <div
+                className="column"
+                dangerouslySetInnerHTML={{
+                  __html: CREDITS_STRINGS.bibliography2,
+                }}
+              />
+              <div
+                className="column"
+                dangerouslySetInnerHTML={{
+                  __html: CREDITS_STRINGS.bibliography3,
+                }}
+              />
+              <div
+                className="column"
+                dangerouslySetInnerHTML={{
+                  __html: CREDITS_STRINGS.bibliography4,
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const CREDITS_STRINGS = {
+  site: `
+    <h2>CREDITS</h2>
+    <div class="credits-rows">
+      <div>
+        <div>Curator:</div> <a href="http://nadimsamman.com/" target="_blank">Nadim Samman</a>
+      </div>
+      <div>
+        <div>Developer:</div> <a href="https://asdf.us/" target="_blank">Jules LaPlace</a>
+      </div>
+      <div>
+        <div>Design:</div> <a href="https://www.stankievech.net/" target="_blank">Charles Stankievech</a>
+      </div>
+    </div>
+    <div>
+      Commissioned by:<br/>
+      <b>KW Institute for Contemporary Art</b><br/>
+      Auguststraße 69<br/>
+      10117 Berlin<br/>
+      Tel. +49 30 243459-0<br/>
+      Fax +49 30 243459-99<br/>
+      <a href="mailto:info@kw-berlin.de?subject=The+Last+Museum">info@kw-berlin.de</a><br/>
+      <br/>
+      KW Institute for Contemporary Art is institutionally supported by the Senate Department for Culture and Europe, Berlin.<br/>
+    </div>
+  `,
+  press: `
+    <h2>No6092</h2>
+      Press Enquiries:<br/>
+      Natanja von Stosch<br/>
+      Tel. +49 30 243459 41<br/>
+      <a href="mailto:nvs@kw-berlin.de?subject=The+Last+Museum">nvs@kw-berlin.de</a><br/>
+      Press Releases and Image Material:<br/>
+      <a href="https://kw-berlin.de/en/press" target="_blank">kw-berlin.de/en/press</a>
+  `,
+  sponsors: `
+    <h2>SPONSORS</h2>
+    <a href="https://www.kw-berlin.de/" target="_blank"><img src="assets/img/kw-white.png"></a>
+  `,
+  bibliography1: `
+    Bibliography
+  `,
+  bibliography2: `
+    Bibliography
+  `,
+  bibliography3: `
+    Bibliography
+  `,
+  bibliography4: `
+    Bibliography
+  `,
+};
diff --git a/src/views/Quote.js b/src/views/Quote.js
new file mode 100644
index 0000000..00f8ca3
--- /dev/null
+++ b/src/views/Quote.js
@@ -0,0 +1,21 @@
+/**
+ * Adorno quote
+ */
+
+import React from "react";
+
+export default function Quote({ visible }) {
+  return (
+    <div className={visible ? "quote visible" : "quote"}>
+      <div>As a constellation,</div>
+      <div>theoretical thought circles the concept</div>
+      <div>it would like to unseal, hoping that it</div>
+      <div>may fly open like the lock of a</div>
+      <div>well-guarded safe-deposit box:</div>
+      <div>in response, not to a single key or</div>
+      <div>a single number, but to a</div>
+      <div>combination of numbers.</div>
+      <div>Theodor W. Adorno</div>
+    </div>
+  );
+}
diff --git a/src/views/Title.js b/src/views/Title.js
new file mode 100644
index 0000000..c86eea8
--- /dev/null
+++ b/src/views/Title.js
@@ -0,0 +1,11 @@
+/**
+ * Title
+ */
+
+import React from "react";
+
+export default function Title({ visible }) {
+  return (
+    <div className={visible ? "site-title visible" : "site-title"}>NO6092</div>
+  );
+}