X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftechniques%2FOutline.js;fp=resources%2Fjs%2Fcomponents%2Ftechniques%2FOutline.js;h=bf98eba37fd78da033d66cf943dccd4e9350c628;hb=7e8555cfc96dcd364ca4fe9895e51af1bb04b546;hp=0000000000000000000000000000000000000000;hpb=4ac9a5a331949fcec42378ddc495385ae8628a79;p=alttp.git

diff --git a/resources/js/components/techniques/Outline.js b/resources/js/components/techniques/Outline.js
new file mode 100644
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;