X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftechniques%2FDetail.js;h=d586a9a159375e544d8b4f4bb0b04d8b3eb2299b;hb=7e8555cfc96dcd364ca4fe9895e51af1bb04b546;hp=88ce5943b62c02447fc3c3c856fb0742377ed740;hpb=68aabaf6da8ed6e675bdea728702d5bd75066964;p=alttp.git

diff --git a/resources/js/components/techniques/Detail.js b/resources/js/components/techniques/Detail.js
index 88ce594..d586a9a 100644
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -2,13 +2,26 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Container } from 'react-bootstrap';
 
-const Detail = ({ technique }) => <Container>
+import Outline from './Outline';
+
+const Detail = ({ technique }) => <Container as="article">
 	<h1>{technique.title}</h1>
+	<Outline technique={technique} />
 	<div dangerouslySetInnerHTML={{ __html: technique.description }} />
+	{technique.chapters ? technique.chapters.map(chapter =>
+		<section id={`c${chapter.id}`} key={`c${chapter.id}`}>
+			{chapter.pivot.level ?
+				React.createElement(`h${chapter.pivot.level}`, {}, chapter.title)
+			: null}
+			<div dangerouslySetInnerHTML={{ __html: chapter.description }} />
+		</section>
+	) : null}
 </Container>;
 
 Detail.propTypes = {
 	technique: PropTypes.shape({
+		chapters: PropTypes.arrayOf(PropTypes.shape({
+		})),
 		description: PropTypes.string,
 		title: PropTypes.string,
 	}),