technique chapters

[alttp.git] / resources / js / components / techniques / Outline.js

diff --git a/resources/js/components/techniques/Outline.js b/resources/js/components/techniques/Outline.js
new file mode 100644 (file)
index 0000000..bf98eba
--- /dev/null
+++ b/resources/js/components/techniques/Outline.js
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ListGroup } from 'react-bootstrap';
+
+const Outline = ({ technique }) => technique.chapters && technique.chapters.length ?
+       <aside className="tech-outline mb-3 ms-3">
+               <ListGroup>
+                       {technique.chapters.map(chapter => chapter.pivot.level ?
+                               <ListGroup.Item
+                                       action
+                                       href={`#c${chapter.id}`}
+                                       key={`c${chapter.id}`}
+                                       title={chapter.short || null}
+                               >
+                                       {chapter.title}
+                               </ListGroup.Item>
+                       : null)}
+               </ListGroup>
+       </aside>
+: null;
+
+Outline.propTypes = {
+       technique: PropTypes.shape({
+               chapters: PropTypes.arrayOf(PropTypes.shape({
+               })),
+       }),
+};
+
+export default Outline;