1 files changed, 54 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
new file mode 100644
index 0000000..de60987
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+
+import actions from 'app/actions'
+import { Arrow } from '../nav/viewer.icons'
+
+const notes = [
+  { index: 1, text: "<i>Lorem ipsum</i>, p. 156." },
+  { index: 2, text: "Ibid." },
+  { index: 3, text: "Ibid." },
+  { index: 4, text: "Cicero, <i>De finibus bonorum et malorum</i>, 1.10.32." },
+  { index: 5, text: "Ibid." },
+  { index: 6, text: "Ibid." },
+  { index: 7, text: "<i>Lorem Ipsum: The Prosody of Verismillitude</i>, p. 72." },
+  { index: 8, text: "Ibid." },
+  { index: 9, text: "Ibid." },
+  { index: 10, text: "Ibid." },
+  { index: 11, text: "Ibid." },
+  { index: 12, text: "Ibid." },
+  { index: 13, text: "Ibid." },
+  { index: 14, text: "Ibid." },
+]
+
+
+export default class ViewerSectionsFootnotes extends Component {
+  render() {
+    return (
+      <div className='nav-footnotes'>
+        <div className='nav-footnotes-close' onClick={() => actions.viewer.hideNavComponent('footnotes')}>
+          x
+        </div>
+        <div className='nav-footnotes-scroll'>
+          {notes.map(note => (
+            <div key={note.index} className="note-element">
+              <div className="note-number">{note.index}</div>
+              <div className="note-body">
+                <div dangerouslySetInnerHTML={{ __html: note.text }} />
+                <u>Go to text</u>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className='nav-footnotes-gradient' />
+        <FootnotesLink type='down' />
+      </div>
+    )
+  }
+}
+
+const FootnotesLink = ({ type }) => (
+  <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('footnotes')}>
+    <Arrow type={type} />
+    {'Notes'}
+  </div>
+)