1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Container } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
6 import Outline from './Outline';
7 import RawHTML from '../common/RawHTML';
8 import { getTranslation } from '../../helpers/Technique';
9 import i18n from '../../i18n';
11 const Detail = ({ technique }) => <Container as="article">
12 <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
13 <Outline technique={technique} />
14 <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
15 {technique.chapters ? technique.chapters.map(chapter =>
16 <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
17 {chapter.pivot.level ?
19 `h${chapter.pivot.level}`,
21 getTranslation(chapter, 'title', i18n.language),
24 <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
30 technique: PropTypes.shape({
31 chapters: PropTypes.arrayOf(PropTypes.shape({
33 description: PropTypes.string,
34 title: PropTypes.string,
38 export default withTranslation()(Detail);