1 files changed, 46 insertions, 19 deletions
diff --git a/src/views/Detail.js b/src/views/Detail.js
index 51598c1..0a756c9 100644
--- a/src/views/Detail.js
+++ b/src/views/Detail.js
@@ -2,30 +2,57 @@
  * Detail view, displaying text plus media
  */
 
-export default function Detail({ node }) {
-  const index = id + 1;
+import React from "react";
+
+import Gallery from "./Gallery.js";
+
+export default function Detail({ node, visible, onClose }) {
+  if (!node) {
+    return <div className="detail" />;
+  }
+
   const { id, data } = node;
+  const index = id + 1;
   return (
-    <div className="detail">
+    <div className={visible ? "detail visible" : "detail"}>
       <div className="content">
-        <div className="title">
-          {index}
-          <br />
-          {data.author}
-          <br />
-          {data.title}
-          <br />
+        <div>
+          <div className="title">
+            <div className="index">{pad(index)}</div>
+            {data.author && (
+              <div dangerouslySetInnerHTML={{ __html: data.author }} />
+            )}
+            <div dangerouslySetInnerHTML={{ __html: data.title }} />
+          </div>
+          <div
+            className="citation"
+            dangerouslySetInnerHTML={{ __html: data.citation }}
+          />
+          <div
+            className="description"
+            dangerouslySetInnerHTML={{ __html: data.description }}
+          />
+        </div>
+      </div>
+      <div className="media">
+        <div className="buttons close">
+          <img src="/assets/img/close.svg" onClick={onClose} />
         </div>
-        <div
-          className="caption"
-          dangerouslySetInnerHTML={{ __html: data.caption }}
-        />
-        <div
-          className="description"
-          dangerouslySetInnerHTML={{ __html: data.description }}
-        />
+        {node.type === "video" ? (
+          "video"
+        ) : (
+          <Gallery images={data.images} visible={visible} />
+        )}
       </div>
-      <div className="media"></div>
     </div>
   );
 }
+
+const pad = (value) => (value < 10 ? "0" + value : value);
+const capitalizeWord = (text = "") =>
+  text ? text.charAt(0).toUpperCase() + text.slice(1) : "";
+const capitalize = (text = "") =>
+  String(text || "")
+    .split(" ")
+    .map(capitalizeWord)
+    .join(" ");