--- /dev/null
+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;