-const Detail = ({ technique }) => <Container>
- <h1>{technique.title}</h1>
- <div dangerouslySetInnerHTML={{ __html: technique.description }} />
+import Outline from './Outline';
+import { getTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
+
+const Detail = ({ technique }) => <Container as="article">
+ <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
+ <Outline technique={technique} />
+ <div dangerouslySetInnerHTML={{
+ __html: getTranslation(technique, 'description', i18n.language),
+ }} />
+ {technique.chapters ? technique.chapters.map(chapter =>
+ <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
+ {chapter.pivot.level ?
+ React.createElement(
+ `h${chapter.pivot.level}`,
+ {},
+ getTranslation(chapter, 'title', i18n.language),
+ )
+ : null}
+ <div dangerouslySetInnerHTML={{
+ __html: getTranslation(chapter, 'description', i18n.language),
+ }} />
+ </section>
+ ) : null}