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,
}),